flex布局

一、什么是flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，采用flex布局的元素，被称之为flex布局容器，所以的子元素自动成为flex容器的子元素，容器默认存在两根轴线，主轴和交叉轴，项目默认沿主轴排列

二、容器的属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

设置主轴的方向
flex-direction:row|row-reverse|coulmn|column-reverse

row:

-- 从左往右

row-reverse

-- 从右往左

column

-- 从上往下

column-reverse

-- 从下往上

flex-wrap

默认情况下，项目都排列在一条直线上（轴线），该属性控制在空间不足的情况下，项目否换行，默认不换行
flex-wrap:wrap|nowrap|wrap-reverse

nowrap

--不换行

wrap

-- 换行

wrap-reverse

--换行，但是第一行在下面

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: <flex-direction> <flex-wrap>;

justify-content属性

定义子元素在主轴的排列方式
justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start:

-- 左对齐

flex-end

-- 右对齐

center

-- 居中

两端对齐，项目之间的间隔都相等

-- 从下往上

space-around

-- 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

align-items属性

align-items属性定义项目在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;

flex-start

交叉轴的起点对齐。

flex-end

交叉轴的终点对齐。

center

交叉轴的中点对齐。

baseline:

项目的第一行文字的基线对齐。

stretch（默认值）

如果项目未设置高度或设为auto，将占满整个容器的高度。