10分钟学会flex布局

一、原理与特点：

1. 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
2. flex布局，子元素的float、clear和vertical-align属性将失效。
3. 任何一个容器都可以被指定为flex布局。
4. flex 布局中不会出现外边距合并问题。

二、父项属性

1、flex-direction：决定主轴的方向

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

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

2、flex-wrap：决定容器内项目是否可换行

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

默认不换行，遵循下列规则

• flex子项最小内容宽度min-content之和大于flex容器宽度，则内容溢出，表现和white-space:nowrap类似。
• 如果flex子项最小内容宽度min-content之和小于flex容器宽度，则：
  • flex子项默认的fit-content宽度之和大于flex容器宽度，则flex子项宽度收缩，正好填满flex容器，内容不溢出。
  • flex子项默认的fit-content宽度之和小于flex容器宽度，则flex子项以fit-content宽度正常显示，内容不溢出。

3、justify-content：设置项目在主轴的排列方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 

4、align-items: 设置子项在侧轴的对齐方式【单行】

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

5、align-content：设置子项在侧轴的排列方式【多行】

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

指明垂直方向每一行flex元素的对齐和分布方式。

 

三、子项属性

1、flex：flex-grow，flex-shrink和flex-basis的缩写

.item{
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
} 

其中第2和第3个参数（flex-shrink和flex-basis）是可选的，默认值为0 1 auto。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

2、align-self：设置子项在侧轴的排列方式

允许单个子项与其他子项不一样的对齐方式，可覆盖父项align-item属性。

3、order：设置项目的排列顺序

数值越小, 排列越靠前, 默认为0。

* {
    margin: 0;
    padding: 0;
}
div {
    width: 500px;
    height: 200px;
    background-color: pink;
    display: flex;
    align-items: flex-end;
}
div>span {
    flex:1;
    height: 50px;
    background-color: red;
}
.last {
    flex: 2;
    background-color: yellow;
    order: -1;
    align-self: center;
}

 

---

 

推荐游戏，边玩边学：https://codingfantasy.com/games/flexboxadventure/play