小程序-Flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。
https://www.runoob.com/w3cnote/flex-grammar.html

任何一个容器都可以指定为Flex布局。

.box{
display: flex;
}

border: solid 1px #cccccc 边框

边框内显示
box-sizing: border-box;

演示
添加了 box-sizing: border-box; 之后

https://www.runoob.com/w3cnote/flex-grammar.html

配合其他的样式使用可以达到这样的效果

达到一定数量不会换行，默认修改内容宽度,所以要用到flex-wrap属性换行属性

加了flex-wrap:wrap后就可以自动换行了

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

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