弹性盒子布局

弹性盒子，即 Flexbox（Flexible Box Layout Module）的缩写，它是专门被设计出来用于创建页面布局的一种方式，flex 布局不仅简洁、方便，而且有着良好的浏览器支持，为我们的页面布局带来了更灵活的选择

基础概念

弹性容器

要将一个容器变为弹性容器，可以直接设置容器的 display 属性为：display : flex，这样可以直接将容器转换为弹性容器，并且容器里面的直接子元素也都会转变成为弹性子元素（flex item）

主轴

主轴（main axis）默认是沿着水平方向延伸的轴，也是弹性子元素默认放置的方向，主轴的开始位置（即与容器边界交叉的点）称为 main start，主轴的结束位置（即与容器边界交叉的地方）称为 main end

交叉轴

交叉轴（cross axis）是垂直于主轴方向的轴。该轴的开始位置和结束位置被称为 cross start 和 cross end

代码示例

<div class="box">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
</div>

.box{
    max-height:400px;
    border: 1px solid #000;
    display: flex;
    overflow:hidden;
}
.item{
    width: 80px;
    height: 80px;
    background-color: orange;
    margin:5px;
    text-align:center;
    line-height:80px;
}

容器属性

flex-direction

flex-direction 属性控制弹性容器主轴的方向（容器主轴的方向决定了弹性子元素的排列方向），默认值是 row，可以设置以下值：

• row：水平方向，与文本方向相同，起点默认在容器左侧
• column：垂直方向，与块级元素堆叠方向相同，起点默认在容器上侧
• row-reverse：水平方向反向，与文本方向相反，起点默认在容器右侧
• column-reverse：垂直方向反向，与块级元素堆叠方向相反，起点默认在容器下侧

flex-direction：rowcolumnrow-reversecolumn-reverse

1

2

3

4

5

6

flex-wrap

flex-wrap 属性用来控制弹性子元素是如何换行的，默认值是 nowrap，可以设置以下值：

• wrap：换行（当一行无法放下更多的弹性子元素时，会将溢出弹性容器的那个弹性子元素换到下一行）
• nowrap：不换行（默认）
• wrap-reverse：反向换行（行为与 wrap 相似，但是起始行与结束行相反）

flex-wrap：nowrapwrapwrap-reverse

1

2

3

4

5

6

7

8

9

10

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 的简写,默认值是 row nowrap

flex-flow：row nowraprow wraprow wrap-reversecolumn nowrapcolumn wrapcolumn wrap-reverserow-reverse nowraprow-reverse wraprow-reverse wrap-reversecolumn-reverse nowrapcolumn-reverse wrapcolumn-reverse wrap-reverse

1

2

3

4

5

6

justify-content

justify-content 属性控制弹性子元素在弹性容器主轴上的对齐方式，默认值是 flex-start，可以设置以下值：

• center：将弹性子元素居中排列
• flex-start：将弹性子元素从行首开始排列
• flex-end：将弹性子元素从行尾开始排列
• space-between：将弹性子元素在每行均匀分配，相邻元素间距离相同，每行的第一个弹性子元素与行首对齐，最后一个与行尾对齐
• space-around：将弹性子元素在每行均匀分配，相邻元素间距离相同，每行的第一个弹性子元素与最后一个距离容器边界的距离是相邻元素间距的一半
• space-evenly：将弹性子元素在每行均匀分配，每个弹性子元素的间距都相同（包括第一个与最后一个距离容器边界的间距）

justify-content：flex-startflex-endcenterspace-betweenspace-aroundspace-evenly

1

2

3

align-items

align-items 属性用来控制弹性子元素在弹性容器交叉轴上的对齐方式,默认值是 normal,可以设置以下值：

• normal：在一般布局方式下，效果与 stretch 一样，但不适用于块级盒子跟表格
• flex-start：弹性子元素向交叉轴起点对齐
• flex-end：弹性子元素向交叉轴结终点对齐
• center：弹性子元素向交叉轴的中心对齐
• baseline：弹性子元素向基线对齐
• stretch：如果没有具体设置弹性子元素的高度，那么弹性子元素的高度会被拉伸到与容器等高

align-items：normalflex-startflex-endcenterbaselinestretch

1

2

3

子元素属性

flex-grow

flex-grow 用来控制弹性子元素在弹性容器中宽度或高度的放大比例（作用于宽度还是高度取决于容器的 flex-direction），默认值是 0，设置负值无效

flex-grow：00.51-1

1

flex-shrink

flex-shrink 属性用来控制弹性子元素在弹性容器中的收缩比例，弹性子元素的宽度只有在默认宽度之和大于容器宽度时才会收缩，收缩的比例取决于 flex-shrink的值，默认值是 1，不允许设置负值

flex-shrink：00.511.52-1

1

flex-basis

flex-basis 属性用来控制弹性子元素在弹性容器中主轴方向的初始大小，默认值是 auto，不允许设置负值，如果在一个弹性子元素上同时设置了 width/height 与 flex-basis，那么 flex-basis 具有更高的优先级

flex-basis：auto0100%200pxfillfit-contentmax-content

1

flex

flex 属性是 flex-grow、flex-shrink、flex-basis 的简写形式，默认值是 0 1 auto，可以使用 1/2/3 个值来指定 flex 属性

flex：0 0 auto1 1 auto1 0 auto1 0 50px1 0 100%1 1 50px1 1 100%initialinherit

1

align-self

align-self 属性用来控制弹性子元素自身在弹性容器交叉轴上的对齐方式，可以覆盖弹性容器的 align-items 属性设置的对齐方式，默认值是 auto（在块盒子或者表格、弹性容器交叉轴方向设置 margin 为 auto， 则此属性无效）

align-self：autoflex-startflex-endcenterself-startself-endbaselinestretch

1

2

3

order

order 属性用来控制弹性子元素在弹性容器中的排列顺序，使弹性子元素按照升序排列，默认值是 0（若设置了相同的 order 值，则按照在代码中出现的顺序进行排列）

order：012345

1

ℹ️提示

弹性盒子布局还有很多其他属性，这里只介绍了在项目中常用的一些属性，想要了解更多弹性盒子的相关信息请 点击这里