关于flex布局
2018-05-04 本文已影响0人
湾里晴空
今天刚刚写完第一个静态页面，大概一千行代码，深感自己的技术还很不够，需要大力修炼。在最近感觉flex这个属性特别重要，因此做此终结。
Flex 容器
flex布局需要在一个容器中实现，这个容器就叫做flex容器，可以通过display属性来声明。
contain{ display: flex;}
声明一个flex容器的值在其父元素声明，可以对其子元素起作用。其容器并不只有flex，同时还有inline-flex。前者对应块状元素，而后者则是行内元素。当声明了一个flex容器之后，这个容器子元素的float、clear、vertical-align属性都会失效。
flex-direction
这个属性设置容器的flex item的排列方向，它有以下几个值：
- row <水平从左向右排列>
- row-reverse <水平从右向左排列>
- column <垂直从上到下排列>
- column-reverse <垂直从下到上排列>
flex wrap
-
在不设置这个属性的情况下，当所有的flex item 的总长度超过容器长度时，item会超出容器，并且不会换行。
image.png
容器中实际上有10个item，但是并没有发生换行，而是超出了容器。
- 但是当我们设置flex-wrap 以后，就可以实现换行了，它的值有以下几个：
- nowrap 默认值不换行
- wrap 换行，新的一行在下面；
-
wrap-reverse 换行，旧的一行在下面
image.png
flex-flow
这个属性的作用是决定item在他们排列方向上的对齐方式
- flex-star 默认值，排列方向起始位置对齐；
- flex-end 排列方向结束位置对齐；
- center 矩阵对齐；
- space-between 两端对齐，如果有剩余空间，则等分间隙；
-
space-around 均匀分布，如果有空隙，两端会存在空隙，且两端空隙为中间空隙的一半。
image.png
align items
该属性也是决定对齐方式，但与上一个不同的是，它决定的是当只有一行时item之间的对齐方式。
- stretch 默认值，在item未设置高度的情况下，item的高将占满容器，这样每个item的高度都相同。
- flex-star （item之间在起始位置（这里是顶部）对齐）
- flex-end （item之间在结束位置（这里是底部）对齐）
- center （item之间中部对齐）
-
baseline （item以他们内部第一行文字的基线为准对齐）
image.png
align-content
这个属性定义了当有多行item之间的对齐方式
- stretch 默认值，在item未设置高度的情况下，item的高将占满这一行，这样每个item的高度都相同。
- flex-start （item在起始位置（这里是顶部）对齐）
- flex-end (item在结束位置（这里是底部）对齐)
- center (item之间中部对齐)
- space-between (两端对齐，如果有剩余空间则平分成为间隙)
-
space-around (均匀分布，如果有空隙，两端会存在空隙，切两端空隙为中间空隙的一半)
image.png
注意：以上属性都是在父级设置；且以下属性都是作用在子元素上面
关于flex子集中的设置：
- flex有三个属性其实是上面三个属性的简写，默认值是flex: 0 1 auto，分别对应flex-grow flex-shrink flex-basis的默认值。
- 针对flex-grow和flex-shrink分别代表的意义：当水平方向上的宽度空间超过所有项目的总宽度时，浏览器根据flex-grow的值将这些项目进行比例拉长；当水平方向上的宽度小于所有项目的总宽度时，浏览器会根据flex-shrink的值将这些项目进行等比例缩短。
- flex-basis 设置项目自身宽度，将会覆盖原有宽度
- 当设置flex：auto表示flex：1 1 auto；
当设置flex：none 表示flex：0 0 auto - flex 取值为一个长度或者百分比，则这个值为 flex-basis的值，flex-grow取 1，flex-shrink取 1
flex 取值为两个非负数字时，分别作为flex-grow和flex-shrink的值。
flex取一个非负数字和长度或百分比，则非负数字为flex-grow的值，长度或百分比为flex-basis的值，flex-shrink取 1。
align-self
- Flex 容器上的 align-item 对容器内的所有项目生效，而 align-self 则可以对某一个项目进行单独的设置，从而实现其余项目排列在容器上方，而这个项目排列在容器下方的布局，取值有：
auto <默认值>
flex-start
flex-end
center
baseline
stretch
弹性盒模型：display:flex (简略版本)
1. 父级：设置主轴方向（水平|垂直），设置主轴上排列反序 ：flex-direction
- 水平：row (起点在左端)
- 垂直：column (起点在上沿)
- 水平且反向：row-reverse (起点在右端)
- 垂直且反向：column-reverse (起点在下沿)
2. 父级：子元素是否换行：flex-wrap
- 不换行：nowrap
- 换行，第一行在上方：wrap
- 换行，第一行在下方：wrap-reverse
3. 父级：主轴上元素对齐方式，也是主轴富余空间管理：justify-content
- flex-start
- flex-end
- center
- space-between
- space-around
4. 父级：侧轴上元素对齐方式，侧轴富余空间管理：align-items
- flex-start
- flex-end
- center
- baseline
- stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。
5. 父级：多根侧轴上元素对齐方式：align-content
- flex-start：子元素集中在顶部
- flex-end：子元素集中在底部
- center：子元素集中在中间
- space-between：
- space-around：
- stretch（默认值）：轴线占满整个交叉轴。
6. 子元素：具体位置设置（排序）
- order:number; 数值越小越靠前，可以接受0 或者负值
7.1 子元素：元素弹性空间（放大比例）
- flex-grow: 1;（默认为0，即如果存在剩余空间，也不放大）
7.2 子元素：元素弹性空间（缩小比例）
- flex-shrink: 1;(默认为1，即如果空间不足，该项目将缩小。)
7.3 子元素：元素弹性空间（初始比例）
- flex-basis:auto; (它可以设为跟width或height属性一样的值，比如350px，则项目将占据固定空间)
7.4 简写：flex
- flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
8. 子元素：单独设置侧轴对齐方式：align-self
- auto
- flex-start
- flex-end
- center
- baseline
- stretch
