一文搞懂如何使用弹性布局

相关概述

容器：给元素添加css样式为display: flex/inline-flex，该元素被称为容器，该元素中的子元素称为项目item，该容器内的项目采用弹性布局。
主轴： :默认情况下是起点在容器的左边，终点在容器的右边，可以设置。
交叉轴：与主轴垂直的线，主轴若为水平轴，则交叉轴为从上到下；主轴若为垂直轴，交叉轴为从左到右；
① 此外，需注意使用flex容器内元素，即flex item的float，clear、vertical-align属性将失效。
②display:flex; 容器添加弹性布局后，显示为块级元素；
display:inline-flex; 容器添加弹性布局后，显示为行级元素；
③弹性布局中可设置的css属性有十二种，其中6种作用于父容器，6种作用于子项目；

弹性布局css属性总览

容器的属性

1.flex-direction
可以设置主轴的方向，可以设置的值有：

• row（默认）：主轴为水平方向，项目沿主轴从左到右排列；

• column：主轴为垂直方向，项目从上到下排列；

• row-reverse：主轴水平 ，项目从右到左排列；

• column-reverse：主轴垂直，项目从下到上排列；
  2.flex-wrap
  默认情况下，项目按照主轴方向排列，flex-wrap可以设置当主轴放不下项目时采用的方式。

• nowrap：自动缩小项目，不换行；

• wrap：换行，且新行在下方；

• wrap-reverse：换行，且新行在上方；

注意：换行时，会自动将父容器平分，例如如图所示，一个div高度是50px；当换行时，新的一行会从父容器高度一半处开始。

3.flex-flow
是flex-direction和flex-wrap的缩写形式，默认值为：flex-flow: row wrap；
4.justify-content

设置容器内的项目沿主轴的对齐方式。

• flex-start：从主轴起点对齐；
• flex-end：主轴终点对齐；
• center：居中；
• space-between：两端对齐，项目之间的间隔相等
• space-around：沿轴线均匀分布；

5.align-items
设置项目沿交叉轴的对齐方式。

• flex-start：交叉轴的起点对齐。

• flex-end：交叉轴的终点对齐。

• center：交叉轴的中点对齐。

• baseline: 项目的第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)
  -stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
  
  6.align-content
  该属性定义了当有多根主轴时，即item不止一行时，多行在交叉轴轴上的对齐方式。注意当有多行时，定义了align-content后，align-items属性将失效。align-content可能值含义如下（假设主轴为水平方向）：

• flex-start：左对齐

• flex-end：右对齐

• center：居中对齐

• space- between：两端对齐

• space-around：沿轴线均匀分布

• stretch：各行将根据其flex-grow值伸展以充分占据剩余空间

项目的属性

1.order
order的值为整数，值越小，item排列越靠前,默认为0。

<div style:"display: flex;">
	<div>1</div>
	<div style:"order: 1">2</div>
	<div>3</div>
	<div>4</div>
</div>

2.flex-grow
当flex有多余空间时，item是否放大。默认值为0，表示有多余空间时也不放大。值为整数，表示不同item的放大比例。

<div class="wrap">
    <div class="div" style="flex-grow:1"><h2>item 1</h2></div>
    <div class="div" style="flex-grow:2"><h2>item 2</h2></div>
    <div class="div" style="flex-grow:3"><h2>item 3</h2></div>
</div>

即当有多余空间时item1、item2、和item3以1：2:3的比例放大。
3.flex-shrink
当容器空间不足时，是否按比例缩小。默认为1，即空间不足时，按比例缩小。
注意：设置为0的时候，表示容器空间不足时不缩小该项目，若容器空间不足，可能会将项目挤出父容器。

4.flex-basis
表示项目在主轴上占据的空间，如果主轴是水平的，则该属性会导致原width失效。等于是设置项目的宽。

5.flex-grow
flex-grow是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
6.align-self
align-self:定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性。
属性值：与align-items相同，默认值为auto，表示继承父容器的align-items属性值。其余属性值和align-items值相同。align-items是设置容器中所有项目按照交叉轴的对齐方式，align-self是设置单一项目按照交叉轴的对齐方式。