[toc]

Flex布局

父项中添加了flex 如果想要孙项（子项的子项）有效果

就在子项中也添加flex就当做是新的父项

不能隔代遗传

Flex主轴方向

使用flex-direction改变元素排列方向

flex布局模型中，弹性盒子默认沿着水平方向排列

使用flex-direction

主轴默认是水平方向, 侧轴默认是垂直方向

Flex侧轴

弹性盒子换行flex-wrap

flex-wrap:warp

取值与justify-content基本相同

nowrap不换行

单行标签和多行标签的属性不能混用

多行标签

align-content: 、flex-start、flex-end、flex-center、space-between、space-around、space-evenly

设置主轴的方向

flex-direction:

默认值 row 行 从左到右

row-reverse 从右到左 少用到

column 列 从上到下

column-reverse 从下到上 少用到

align-content用处待考证

父项

display：flex 将普通盒子转变成为flex盒子

justify-content：设置主轴对齐方式

多行有8个值 单行3个值

justify-content:

flex-start 主轴正常顺序 默认是X轴 所以是左对齐

flex-end 主轴反方向 所以是右对齐

center 主轴居中

space-between 两边先占，剩下平分

space-around 间隔，两侧间隔比中间间隔要小，两侧间隔是中间间隔的一半

*好像可以用伪元素来解决这问题 我就想想 休息的时候试试

space-evenly 平均分

space-around 和 space-evenly 的细微差别

space-evenly：flex 元素之间和 flex 元素和容器的空间总是相等的

space-around：只有 flex 元素之间的空间是相等的 ， 第一个 flex 元素和最后一个 flex 元素和容器的空间是 flex 元素间空间的一 半

align-item（单行） 设置侧轴对齐方式

center

flex-start

flex-end

align-content（多行） 设置侧轴对齐方式

flex-start

flex-end

center

space-between

space-around

space-evnely

flex-warp 设置换行

nowarp 默认值，不换行

wrap 换行

flex-diretion设置主轴方向

row 默认值 从左到右 常用

row-reverse 从右到左

column 从上到下 常用

column 从下到上

子项

默认的宽度等于内容撑开的部分，默认的高度等于父项的高

用在子项的属性：

flex:设置子项占父项宽度（高度）的比例

每一个标签 都占一份 不能实现换行哦

align-self：设置子项自己在侧轴上的对齐方式

flex-start 侧轴顺序

flex-end侧轴顺序反着来

center居中

当主轴方向改成了column

align-seft （水平）设置子项在侧轴上的对齐

flex-start

flex-end

center

设置子项均分父项的宽度

flex:1

每一个标签 都占一份 不能实现换行哦 只能用来做平分

还有就是把剩下的宽度拿来用

有换行的话就优先使用flex-warp:warp。

看主轴 X轴就是设置宽度 Y轴就是设置高度