搭建移动端布局框架:重拾flex-CSDN博客

0x001 概述

说起关于 flex的文章。我觉得啊除了阮一峰老师，再也无人能出其右了，所以这里也只是聊做记录。

0x002 基本概念

坐标图和各种属性说明.png

Flex container：元素添加了flex属性后就变成了flex容器,
Axes ：Flex Container的坐标轴，分为main axes(主轴)和cross axes（交轴）
Flex item：父元素一旦添加flex属性，子元素将直接变成flex子元素，将不再显示默认布局,而是沿着Flex container的主轴顺序排列,如果改变主轴方向,则子元素的排列方向也将会改变
- 默认样式(box定义了一个100*100的盒子，container定义了一个500*100的盒子，bg*只是背景颜色)
```
 <div class="container ">
    <div class="box bg1"></div>
    <div class="box bg2"></div>
    <div class="box bg3"></div>
 </div>
    
```
- 父元素添加flex属性
```
<div class="container flex">
    <div class="box bg1"></div>
    <div class="box bg2"></div>
    <div class="box bg3"></div>
</div>
```

0x003 容器属性

属性简介
- flex-direction：
- flex-wrap：
- flex-flow：
- justify-content：
- align-items：
- align-content：
flex-direction:
这个属性可以改变主轴的方向,子元素沿着主轴排列,所以改变主轴方向将会改变子元素的排列方向
- 初始值: row
- 可选值:
  - row ：主轴从main start到main end
  - row-reverse ：主轴从main end到main start
  - column ：主轴从cross start到cross end
  - column-reverse：主轴从cross end到cross start

flex-wrap
默认情况向子元素沿着主轴排列时,如果所有子元素的总大小超过父元素,则子元素将会被压缩,该属性可以改变这种情况,使之在这种情况下换行而不压缩子元素宽度
- 初始值: nowrap
- 可选值:
  - nowrap : 不换行
  - wrap : 换行
  - wrap-reverse : 换行并倒序

   ![clipboard.png](/img/bVKrAI)

flex-flow
是flex-direction和flex-wrap的缩写形式
- 初始值: row nowrap
justify-content
该属性定义了子元素相对父容器的对齐方式
- 初始值 : flex-start
- 可选值 :
  - flex-start: 子元素紧靠main start
  - flex-end: 子元素紧靠main end
  - center: 子元素居中对齐
  - space-between: 子元素两侧无边距,等分居中对齐
  - space-around:子元素等分居中对齐

align-items
该属性定义子元素在交轴上的对齐方式
- 初始值 : stretch
- 可选值 :
  - flex-start : 子元素相对于cross start对齐
  - flex-end : 子元素相对于cross end对齐
  - center : 子元素相对于cross axes居中对齐
  - baseline : 子元素相对于第一个子元素的基线对齐
  - stretch : 如果子元素未设定高度,则拉伸至容器最大高度

align-content
该属性定义了多条主轴在交轴上的对齐方式
- 初始值 : stretch
- 可选值 :
  - flex-start : 多条轴线相对cross start对齐
  - flex-end : 多条轴线相对cross end对齐
  - center : 多条轴线相对cross axes居中对齐
  - space-between : 多条轴线两端无间距,中间等分间距对齐
  - space-around : 多条轴线等分间距对齐
  - stretch : 如果轴线未设定高度,则拉伸至容器最大高度

0x004 子元素属性

属性简介:
- order
- align-self
- flex-grow
- flex-shrink
- flex-basis
order
值越小越靠接近main start
- 初始值 : 0

flex-grow
该属性定义子元素占据剩余空间的比例,数值越大,占据的比例越大

align-self
该属性定义该子元素相对于交轴的对齐方式
- 初始值 : stretch
- 可选值 :
  - flex-start : 元素相对于cross start对齐
  - flex-end : 元素相对于cross end对齐
  - center : 元素相对于cross axes居中对齐
  - baseline : 元素相对于第一个子元素的基线对齐
  - stretch : 如果元素未设定高度,则拉伸至容器最大高度

flex-shrink
该属性定义了元素的缩小比例,数值越大,缩小比例越大,0不缩放

flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。(摘自阮一峰博客原文)

0x004 总结

其实当初看了许多遍阮一峰老师关于flex的博客,但是依旧没有理解.如今自己整理了一遍,发现了当初理解的误区,当初认为,flex-direction让子元素的排序方式改变,但是其flex-directory的作用是让主轴和交轴交换位置.从这个方向理解便可以真正理解flex在不同方向的布局.
也就是我们不能用x轴y轴来理解flex,而是使用主轴和交轴来理解.

0x005 下一篇文章

搭建移动端布局框架:整合flex