Flex布局详细讲解,flex布局菜鸟教程
flex 布局
一、Flex 布局是什么？
Flex 是 Flexible Box 的缩写 ，意为“弹性布局” 用来为盒状模型提供最大的灵活性
任何一个容器都可以指定为 Flex 布局 ? （行内元素也可以）
二、基本概念
采用 Flex 布局的元素，称为Flex 容器 它的所有子元素自动成为容器成员，称为Flex项目
三、容器的属性 （重点记忆）
以下6个属性设置在容器上。
3.1 flex-direction 属性决定主轴的方向（即项目的排列方向）
flex-direction:row | row-reverse | colume | colume-reverse;
1）row：横向从左到右排列（左对齐），默认的排列方式。
2）row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
3）column：纵向排列
4）column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
flex-wrap 定义如果一条轴线排不下，如何换行
flex-wrap: nowrap? |? wrap? |? wrap-reverse
1) nowrap (默认)不换行?
2）wrap 换行，第一行排列在上方?
3）wrap-reverse: 换行，第一行在下方
3.2 .flex-flow 是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap ?
justify-content 定义了项目在主轴上的对齐方式
justify-content : flex-start | flex-end | center | space0-between | space-around
align-items 定义项目在交叉轴上如何对齐
align-item: flex-start? |? flex-end? ? |? center? |? baseline |? stretch?
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
前端应知应会：flex布局详解
前端应知应会：flex布局详解
flex布局可以说是当下前端开发必须学会的一个基本技能，它在面试中的出场率也很高，有必要专门讲解一下。
flex布局全称flexible box布局模型，是一种比较高效的css3布局方案
通过设置元素的display属性，改成flex属性
来指定对应容器为flex布局。然后它的所有子元素自动成为了容器元素，不脱离文档流的情况下按照flex item的默认布局规则排列。
首先看下容器的属性：
1、flex-direction
决定主轴的方向，
默认值是row即横向从左往右的顺序进行排列。
其他选项值还有row-reverse、column、column-reverse
2、flex-wrap
它决定了如果轴线排列不下去的话，如何进行换行
默认是不进行换行，继续沿着主轴方向放置。
其它选项还有：wrap（换行）、wrap-reverse（换行、但是位置跟wrap相反）
3、flex-flow
它是flex-firection和flex-wrap的简写
4、justify-content
该属性定义了item在主轴上的对齐方式
默认值是：flex-start即顺着主轴方向排列对齐
其他还有flex-end：逆着主轴方向并从最远处往主轴起点排列
center：居中
space-between：两端对齐，项目之间间隔相等
space-around：每个项目两侧留白距离相等
5、align-items
该属性定义了项目在交叉轴上如何对齐
毕竟，每个item的高度不一定完全一样。
它的默认值是stretch：即如果item没有设置高度或者是auto，则会占据整个容器的高度
其他还有flex-start、flex-end、center、baseline
6、align-content
它跟align-items的区别就是，该属性定义的是多跟轴线的对齐方式
该参数有六个可选项：
flex-start、flex-end、center、space-between、space-around、stretch
这里面要记得的是处于不同轴线上的item不会遮挡，即如果某个轴线上有两个不同高度的item，那么下一个轴线的位置会按照上一条轴线上高度最高的item进行计算。
针对item，也有一些属性可以设置
1、order决定了项目的排列顺序，可以通过设置该属性将对应的item往前排列
2、flex-grow，决定了item的放大比例，默认为0不进行放大。
3、flex-shrink，定义了item的缩小比例，默认为1，如果空间不够的话所有轴线上的item将进行同比缩小，如果为0则该item不进行缩小
4、flex-basis，定义item在轴线上占据的宽度，如果没设置的话，就按item自身的宽度进行分配
5、align-self。定义item在轴线纵向的排列方式，可以替换掉对应flex容器的align-items属性，为该item设置专门的对齐方式
下面再举个例子
!DOCTYPE html
html lang="en"
Flex布局
? ??Flex布局也称弹性布局（flexiblebox）模块，主要是为了提供一个更有效的方式对容器之间的各项内容进行布局。弹性布局的主要思想是让容器能根据需要改变项目的宽度和高度，以填满可用空
间，满足所有类型的显示设备和屏幕尺寸。因此弹性布局模块的大小是未知或者动态变化的。
? ??采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
Flex布局比较适合用于小规模的布局，比如应用程序中的组件布局。Flex布局容器默认存两条轴：水平主轴（main
axis）和垂直的交叉轴（cross axis）。主轴的开始位置与边框的交叉点叫作main start。结束位置叫作main
end；交叉轴的开始位置叫作cross start，结束位置叫作cross end。项目默认沿主轴排列。
1.给父元素加上display:flex开始盒子布局
row? ? |? ? row-reverse? ? |? ? column? ? |? ? column-reverse
（1）row（默认值）：主轴为水平方向，起点在左端。
（2）row-reverse：主轴为水平方向，起点在右端。
（3）column：主轴为垂直方向，起点在上沿。
（4）column-reverse：主轴为垂直方向，起点在下沿。
nowrap? ? |? ? wrap? ? |? ? wrap-reverse
（1）nowrap：不换行
（2）wrap ：换行。第一行在上方
（3）wrap-reverse：换行。第一行在下方
flex-start? ? |? ? flex-end? ? |? ? center? ? |? ? space-between? ? |? ? space-around? ??
（1）flex-start（默认值）：左对齐
（2）flex-end：右对齐
（3）center： 居中
（4）space-between：两端对齐，项目之间的间隔都相等
（5）space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
flex-start? ? |? ? flex-end? ? |? ? center? ? |? ? baseline? ? |? ? stretch
（1）flex-start：交叉轴的起点对齐
（2）flex-end：交叉轴的终点对齐
（3）center：交叉轴的中点对齐
（4）baseline: 项目的第一行文字的基线对齐
（5）stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
auto? ? |? ? flex-start? ? |? ? flex-end? ? |? ? center? ? |? ? baseline? ? |? ? stretch
该属性可取6个值，除了auto，其他都与align-items属性完全一致。
(完)
