Flex布局

Flex布局

为什么要使用Flex布局呢？
答：Flex布局是弹性盒模型，字面意思也就是可以因为页面大小来改变元素，flex布局可以控制盒子的位置和顺序。

给父盒子添加display: flex;让它变成弹性布局！
通过父盒子来控制子盒子

我们给盒子写点样式后

flex-direction(定义轴)

flex-direction:row;水平轴（排｜｜行）
flex-direction: row-reverse; /* 水平翻转 */

同道理有水平也就有垂直

flex-direction:column; 垂直
flex-direction:column-reverse;垂直翻转

理解好以上的轴下面学习就简单了

flex-wrap(溢出换行)

flex-wrap:wrap;

定义了一个父盒子大小只有500px，此时一个盒子是(100px+1px*5)，父盒子容不下就会换行！

flex-wrap:wrap-reveres; 反转排列

主轴元素排列

justify-content: flex-start;//主轴的开始
justify-content: flex-end;//主轴的结束
justify-content: center;//主轴居中

justify-content: flex-start;//主轴的开始

justify-content: flex-end;//主轴的结束

justify-content: center;//主轴居中

主轴分布

justify-content: space-evenly;//平均分布
justify-content: space-around;//中间间距两倍
justify-content: space-between;//左右贴边对齐

justify-content: space-evenly;//平均分布

justify-content: space-around;//中间间距两倍

justify-content: space-between;//左右贴边对齐

align-items: flex-start;//交叉位置开始 行
align-items: flex-end;//交叉位置结束	行
align-items: center;//交叉位置居中 行
 align-content: ; //列
 

元素可用空间 flex-grow

flex-grow:1;

元素动态缩小 flex-shrink

分配

 flex-shrink: 0; //分配不变
 flex-shrink: 1;//缩小1

主轴的基本尺寸

Max-width 第一

flex-basis 第二

width 第三

考虑 flex-direction

阅读问题时首先想到的是，flex-basis这并不总是适用于width。

当flex-direction是row，flex-basis控制宽度。

但是，当flex-direction是column，flex-basis控制高度。

弹性布局排序方式

order:1	//数值越小越往上

文本节点排列布局

文本节点放入本身，不要放入父集

/* 对齐方式 */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* 从行首开始排列 */
justify-content: end;        /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;       /* 一个挨一个在对齐容器得左边缘 */
justify-content: right;      /* 元素以容器右边缘为基准，一个挨着一个对齐, */

/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* 分配弹性元素方式 */
justify-content: space-between;  /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly;  /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */
justify-content: stretch;       /* 均匀排列每个元素
                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */

/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;

/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset

值	描述	测试
flex-start	默认值。从行首起始位置开始排列。	测试 »
flex-end	从行尾位置开始排列。	测试 »
center	居中排列。	测试 »
space-between	均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。	测试 »
space-evenly	均匀排列每个元素，每个元素之间的间隔相等。	测试 »
space-around	均匀排列每个元素，每个元素周围分配相同的空间。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。
																		--文档
https://m.runoob.com/cssref/css3-pr-justify-content.html