Flex 布局知识详解

此文为个人理解文章笔记，详情请看 -> 阮一峰的Flex 布局教程：语法篇
找到一个游戏 -> 拯救小青蛙 可以加强布局思维

前言

基于 display + position + float 的传统解决方案的不足，2009年，W3C 提出了一种新的方案–Flex 布局。

Flex 布局是什么？

flex 布局是 flexible box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
支持 ie10+，设置该布局之后 子元素的float、clear、vertical-align属性会失效。

基本概念

flex 布局包括 flex 容器 和 flex 项目。容器存在两种方向，水平和垂直。

容器的属性（6）

6 个属性设置在容器上：

flex-direction: row | row-reverse | column | column-reverse; /*控制排列方向*/
flex-wrap: nowrap | wrap | wrap-reverse; /*项目是否排在一条线上 wrap 代表换行*/
flex-flow：<flex-direction> || <flex-wrap>; /*前两个的简写，默认为 row nowrap*/
justify-content: flex-start | flex-end | center | space-between | space-around; /*对齐方式，左对齐、右对齐、居中、两端对齐、项目两侧间隔相等*/
align-items: flex-start | flex-end | center | baseline | stretch; /*项目在副轴上的对齐方式*/
align-content：flex-start | flex-end | center | space-between | space-around | stretch; /*多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。*/

项目的属性（6）

order: <integer>; /*项目的排列顺序。数值越小，排列越靠前，默认是0。*/
flex-grow: <number>; /* 项目的放大比例，默认是0，即如果存在剩余空间，也不放大。 */
flex-shrink: <number>; /* 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 */
flex-basis: <length> | auto; /* 在分配多余空间之前，项目占据的主轴空间（main size） */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; /* 默认值 0 1 auto */
align-self: auto | flex-start | flex-end | center | baseline | stretch; /* 允许单个项目对齐方式自己设置，覆盖父元素的 align-items 属性 */

赏

谢谢你请我吃糖果

支付宝

微信