【CSS】十分钟彻底弄懂flex布局 - 弹性盒 - 伸缩盒 - 代替浮动

参考&推荐阅读

Flex 布局教程：语法篇
Flex 布局教程：实例篇

1. 什么是flex

flex (flexible box 弹性盒，伸缩盒) 【弹性布局】

• 是CSS3中的又一种布局手段
• 主要同来代替浮动来完成页面的布局
• flex可以使元素具有弹性，让元素可以跟随页面大小的改变而改变

任何一个容器都可以指定为flex布局

• 当父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效
• 采用flex布局的元素，成为flex容器，弹性容器，简称容器 container
• 其所有子元素自动成为容器成员，成为flex项目(item)，简称项目 item

一句话总结flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

主轴：排列的方向
侧轴：垂直于主轴（后面也称交叉轴）

2. 弹性容器 container

要使用弹性盒，必须先将一个元素设置为弹性容器
（父盒子）通过display设置弹性容器

.box{
   
  display: flex; /* 设置为块级弹性容器*/
  dispaly: inline-flex /* 设置为行内弹性容器*/
}

• 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

常见容器的属性总结

常见容器属性	属性功能
flex-direction	设置主轴方向
justify-content	设置主轴子元素排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上子元素的排列方式（多行）
align-items	设置侧轴上子元素的排列方式（单行）
flex-flow	复合属性，相当于设置了 flex-direction 和 flex-wrap

flex-direction 排列方向

属性决定主轴的方向（即项目的排列方向）

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

属性值	说明
row（默认值）	【从左到右】主轴为水平方向，起点在左端。
row-reverse	【从右到左】主轴为水平方向，起点在右端。
column	【从上到下】主轴为垂直方向，起点在上沿。
column-reverse	【从下到上】主轴为垂直方向，起点在下沿。

flex-wrap 如何换行

默认情况下，项目都排在一条线（又称"轴线"）上（如果显示不开，就缩小子元素的宽度）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。

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

属性	说明
nowrap（默认）	不换行。
wrap	换行，