前端优
前端优
我用我的双手去成就我的梦想，我将遵循此道直至终结！
弹性盒子布局display:flex
发布时间：2024-09-06 15:59 作者：一友画
一、弹性排列方向
设置弹性布局的方向--语法 flex-direction:值
-
a)flex-direction:row; 横向排列，等同于左浮动效果
案例1代码示例：
<style type="text/css"> .box{width: 300px;height: 300px;border: 1px solid #000;display: flex;flex-direction:row;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例1
盒子1盒子2盒子3 -
b)flex-direction:row-reverse; 横向反向排列，等同于右浮动效果
案例2代码示例：
<style type="text/css"> .box{width: 300px;height: 300px;border: 1px solid #000;display: flex;flex-direction:row-reverse;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例2
盒子1盒子2盒子3 -
c)flex-direction:column; 纵向排列
案例3代码示例：
<style type="text/css"> .box{width: 300px;height: 300px;border: 1px solid #000;display: flex;flex-direction:column;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例3
盒子1盒子2盒子3 -
d)flex-direction:column-reverse; 纵向反向排列
案例4代码示例：
<style type="text/css"> .box{width: 300px;height: 300px;border: 1px solid #000;display: flex;flex-direction:column-reverse;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例4
盒子1盒子2盒子3
二、弹性布局是否换行
语法 flex-wrap:值
-
a)flex-wrap:nowrap; 不换行
案例1代码示例：
<style type="text/css"> .box{width: 100px;height: 300px;border: 1px solid #000;display: flex;flex-wrap:nowrap;} .box img{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"> <img src="/uploads/240906/1-240Z62346094N.png" alt="" /> <img src="/uploads/240906/1-240Z62346094N.png" alt="" /> <img src="/uploads/240906/1-240Z62346094N.png" alt="" /> </div>案例1
-
b)flex-wrap:wrap; 换行
案例2代码示例：
<style type="text/css"> .box{width: 100px;height: 300px;border: 1px solid #000;display: flex;flex-wrap:wrap;} .box img{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"> <img src="/uploads/240906/1-240Z62346094N.png" alt="" /> <img src="/uploads/240906/1-240Z62346094N.png" alt="" /> <img src="/uploads/240906/1-240Z62346094N.png" alt="" /> </div>案例2
-
c)flex-wrap:wrap-reverse; 换行并反向排列
案例3代码示例：
<style type="text/css"> .box{width: 100px;height: 300px;border: 1px solid #000;display: flex;flex-wrap:wrap-reverse;} .box img{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"> <img src="/uploads/240906/1-240Z62346094N.png" alt="" /> <img src="/uploads/240906/1-240Z62346094N.png" alt="" /> <img src="/uploads/240906/1-240Z62346094N.png" alt="" /> </div>案例3
三、弹性布局的水平对齐方式
语法 justify-content:值
-
a)justify-content:flex-start; 从左向右（左对齐）
案例1代码示例：
<style type="text/css"> .box{width: 300px;height: 300px;border: 1px solid #000;display: flex;justify-content:flex-start;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例1
盒子1盒子2盒子3 -
b)justify-content:flex-end; 从右向左（右对齐）
案例2代码示例：
<style type="text/css"> .box{width: 300px;height: 300px;border: 1px solid #000;display: flex;justify-content:flex-end;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例2
盒子1盒子2盒子3 -
c)justify-content:center; 居中对齐
案例3代码示例：
<style type="text/css"> .box{width: 300px;height: 300px;border: 1px solid #000;display: flex;justify-content:center;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例3
盒子1盒子2盒子3 -
d)justify-content:space-between; 两端对齐，中间等距离隔开
案例4代码示例：
<style type="text/css"> .box{width: 300px;height: 300px;border: 1px solid #000;display: flex;justify-content:space-between;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例4
盒子1盒子2盒子3 -
e)justify-content:space-around; 两端的空白是中间空白的一半，环绕对齐
案例5代码示例：
<style type="text/css"> .box{width: 300px;height: 300px;border: 1px solid #000;display: flex;justify-content:space-around;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例5
盒子1盒子2盒子3 -
f)justify-content:space-evenly; 等距离排列
案例6代码示例：
<style type="text/css"> .box{width: 300px;height: 300px;border: 1px solid #000;display: flex;justify-content:space-evenly;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例6
盒子1盒子2盒子3
四、弹性布局的垂直对齐方式
语法 align-content:值
-
a)align-content:stretch; 靠上排列，但是元素之间有间距
案例1代码示例：
<style type="text/css"> .box{width: 100px;height: 300px;border: 1px solid #000;display: flex;flex-wrap: wrap;align-content:stretch;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例1
盒子1盒子2盒子3 -
b)align-content:flex-start; 靠上排列（上对齐）
案例2代码示例：
<style type="text/css"> .box{width: 100px;height: 300px;border: 1px solid #000;display: flex;flex-wrap: wrap;align-content:flex-start;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例2
盒子1盒子2盒子3 -
c)align-content:flex-end; 靠下排列（底部对齐）
案例3代码示例：
<style type="text/css"> .box{width: 100px;height: 300px;border: 1px solid #000;display: flex;flex-wrap: wrap;align-content:flex-end;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例3
盒子1盒子2盒子3 -
d)align-content:center; 垂直居中对齐
案例4代码示例：
<style type="text/css"> .box{width: 100px;height: 300px;border: 1px solid #000;display: flex;flex-wrap: wrap;align-content:center;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例4
盒子1盒子2盒子3 -
e)align-content:space-between; 上下对齐，中间等距离隔开
案例5代码示例：
<style type="text/css"> .box{width: 100px;height: 300px;border: 1px solid #000;display: flex;flex-wrap: wrap;align-content:space-between;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例5
盒子1盒子2盒子3 -
f)align-content:space-around; 上下两端的空白是中间空白的一半，环绕对齐
案例6代码示例：
<style type="text/css"> .box{width: 100px;height: 300px;border: 1px solid #000;display: flex;flex-wrap: wrap;align-content:space-around;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例6
盒子1盒子2盒子3 -
g)align-content:space-evenly; 上下等距离排列
案例7代码示例：
<style type="text/css"> .box{width: 100px;height: 300px;border: 1px solid #000;display: flex;flex-wrap: wrap;align-content:space-evenly;} .box div{width: 80px;height: 80px;border: 1px solid #1e90ff;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例7
盒子1盒子2盒子3
五、交叉对齐方式
语法 align-items:值
-
a)align-items:flex-start; 从起始位置对齐
案例1代码示例：
<style type="text/css"> .box{width: 300px;height: 300px;border: 1px solid #000;display: flex;align-items:flex-start;} .box div{width: 80px;border: 1px solid #1e90ff;} .box div:first-child{height: 120px;background: #f00;} .box div:nth-child(2){height: 80px;background: #0f0;} .box div:last-child{height: 100px;background: #00f;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例1
盒子1盒子2盒子3 -
b)align-items:flex-end; 在结束位置对齐（底部对齐）
案例2代码示例：
<style type="text/css"> .box{width: 300px;height: 300px;border: 1px solid #000;display: flex;align-items:flex-end;} .box div{width: 80px;border: 1px solid #1e90ff;} .box div:first-child{height: 120px;background: #f00;} .box div:nth-child(2){height: 80px;background: #0f0;} .box div:last-child{height: 100px;background: #00f;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例2
盒子1盒子2盒子3 -
c)align-items:center; 垂直居中对齐
案例3代码示例：
<style type="text/css"> .box{width: 300px;height: 300px;border: 1px solid #000;display: flex;align-items:center;} .box div{width: 80px;border: 1px solid #1e90ff;} .box div:first-child{height: 120px;background: #f00;} .box div:nth-child(2){height: 80px;background: #0f0;} .box div:last-child{height: 100px;background: #00f;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例3
盒子1盒子2盒子3 -
d)align-items:baseline; 在基准线对齐
案例4代码示例：
<style type="text/css"> .box{width: 300px;height: 300px;border: 1px solid #000;display: flex;align-items:baseline;} .box div{width: 80px;border: 1px solid #1e90ff;} .box div:first-child{height: 120px;background: #f00;} .box div:nth-child(2){height: 80px;background: #0f0;} .box div:last-child{height: 100px;background: #00f;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例4
盒子1盒子2盒子3 -
e)align-items:stretch; 拉伸子元素（图片不行）
案例5代码示例：
<style type="text/css"> .box{width: 300px;height: 300px;border: 1px solid #000;display: flex;align-items:stretch;} .box div{width: 80px;border: 1px solid #1e90ff;} .box div:first-child{height: 120px;background: #f00;} .box div:nth-child(2){height: 80px;background: #0f0;} .box div:last-child{height: 100px;background: #00f;} </style> <div class="box"><div>盒子1</div><div>盒子2</div><div>盒子3</div></div>案例5
盒子1盒子2盒子3
总结：弹性盒子布局兼容写法
display: -moz-box; /*firefox*/
display: -ms-flexbox; /*IE10*/
display: -webkit-box; /*Safari*/
display: -webkit-flex; /*Chrome*/
display: box;
display: flexbox;
display: flex;
以上内容，在整理时难免有疏漏错误之处，如有发现，可以通过顶部的“联系站长”提出反馈，感谢您的支持！