FLEX BOX (弹性魔盒) 完全指南

基础概念

FLEXBOX 弹性魔盒 布局模式 旨在 创建一种更高效的布局方式，去校准 对齐 容器内部 各种元素 之间的 空白间距 排版方式

flexbox  是一套 模式 ，它并不是 CSS某一个单一的属性，flexbox 包含了许多的属性，里面有一些属性是专门设置在 容器上的 (containers ) 其他的 一些属性 却是设置 在 容器内部的 子容器中（item）
下面我们来具体看看

设置了 flexbox 中的子容器 它们的排列方式 会沿着 main axis  从 main start 到 main end  或者 沿着 cross axis 从 cross start 到 cross end 排列

• main axis - main axis 我们习惯叫它 flex容器上的 主轴 flex 中的 子容器（item）都会沿着这条轴进行排列
• main start 和 main end  flex 容器内部的 item 会沿着 主轴 从 main start 一直 排列 到 main end
• cross axis - cross axis 和主轴一样 只不过他是竖着的 
• cross start 和 cross end  和 main start  main end 一样 从 竖轴的 开始 到结束

flex container 父元素属性

        下面我们来定义 flex container

.container {  display: flex; /* or inline-flex */}

小提示  css 的 columns 属性 在 flex 盒子中是无效的

flex-direction  子容器的 排列方向

 这个属性 其实是定义了 flex container 中 flex item 沿着 主轴（横着 main-axis 或者竖着 的 cross） 的 方向 如上图所示

.container {  flex-direction: row | row-reverse | column | column-reverse;}

• row (默认 )   上图 从左数第三个 
• row-reverse 上图 从左数 第四个
• column          上图 从左数 第二个
• column-reverse 上图 从左数 第一个

 flex-wrap 

 

flex item  默认 会尽量排满 第一排 然后再排后面一排 ，你可以通过这个属性 改变上面的排列方式 按照你想要的方式来排列

 

.container{  flex-wrap: nowrap | wrap | wrap-reverse;}

• nowrap (默认) 不换行
• wrap 排满一行换行
• wrap-reverse  反向换行 理解 就是 上图 下面三个 和 上面4个色块 互换位置

justify-content

这个 属性 定义了 flex item 沿着主轴的 排列方式 

.container {  justify-content: flex-start | flex-end | center | space-between | space-around;}

• flex-start  上图第一个
• flex-end 上图 第二个
• center 上图第三个
• space-between 上图第四个
• space-around 上图第五个

align-items

这个属性其实 就是 上面justify-content 的 竖轴的版本

.container {  align-items: flex-start | flex-end | center | baseline | stretch;}

• flex-start 上图第一个
• flex-end 上图第二个
• center  上图第三个
• baseline 上图第五个
• stretch 上图第四个

align-content

注意 这个属性 在 items只有一行的情况下是不起作用的

.container {  align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

• flex-start 第一张图
• flex-end 第二张图
• center 第三张图
• space-between 第五张图
• space-around 第六张图
• stretch 第四张图

flex box item 内部属性

order 属性

flex item 默认都是按照DOM文档的 顺序进行排列的 ，order的默认值 都是 0，当通过 order 属性进行更改时 flex item 会根据 order 值的 大小 从小到大依次从左到右的进行排列

align-self 属性

flex item 

align-self: auto | flex-start | flex-end | center | baseline | stretch