酒浓码浓 - Flex属性

Flex属性

flex相当于一个霸道的大哥 ，子元素都是小弟

大哥指挥着小弟  ，怎么排好队形

设置后 float ， clear 等等都会失效（也不需要，如果需要那就是你的问题）

Flex

flex-direction 决定主轴方向

flex-wrap 单行多行显示

flex-flow 简写

justify-content 主轴方向上的对齐方式

align-items 交叉轴方向上的对齐方式

align-content 定义 多根轴的对齐方式（1根无效）

order 元素位置 顺序 （-1 ， 0 ， 1）

align-self 在交叉轴上对齐一个元素 覆盖 align-items

 

flex-direction : row | row-reverse | column | column-reverse

row 主轴为水平方向 起点在左端

row-reverse 主轴为水平方向 起点在右端

column 主轴为垂直方向 起点在上沿

column-reverse 主轴为垂直方向 起点在下沿

 

flex-wrap ： nowrap | wrap | wrap-reverse

nowrap 不换行

wrap 换行

wrap-reverse 换行与wrap相似 但行的顺序倒过来

 

flex-flow 默认值 flex-flow : row nowrap

 

justify-content : flex-start | flex-end | center | space-between | space-around

flex-start 类似左浮动

flex-end 类似右浮动

center 居中

space-between 两端对齐 各个flex项目之间的间距相等

space-around 各个flex项目两侧的间隔相等

 

align-items : flex-start | flex-end | center | baseline | stretch

flex-start 对齐交叉轴的起点

flex-end 对齐交叉轴的终点

center 居中

baseline 第一行文字 基线对齐

stretch 若未设高 或 设auto 项目占满整个窗口

 

align -content : flex-start | flex-end | center | space-between | space-around | stretch

flex-start 对齐交叉轴的起点

flex-end 对齐交叉轴的终点

center 居中

space-between 两端对齐间隔平分

space-around 沿交方向间隔相等

stretch 沿交方向占满交叉轴

 

flex 也可以直接设数字 例如 flex : 1我粗俗的理解 一行东西（不管里面有多少） 共用一份（这一行） ， 可以自己玩玩 挺有用的