flex 布局学习笔记

flex 布局

flex布局是什么？

可以参考学习阮一峰的教程，此人写的教程通俗易懂

基本概念

采用Flex布局的元素，成为Flex容器（flex container) ，简称”容器“。它的所有子元素自动成为容器成员，成为Flex项目（flex item），简称”项目“。

容器的属性

• flex-direction 走向
• flex-wrap 换行
• flex-flow => flex-direction + flex-wrap
• justify-content
• align-items
• align-conten

设置成flex后，子元素的的float clear 将失效

设置成flex布局后，元素成了容器成员

坐标走线默认往右，往下

3.1 flex-direction

主轴走向

3.2 flex-wrap

换行

3.3 flex-flow

3.4 justify-content 属性

• 定义了项目在主轴上的对齐方式

3.5 aligin-items 属性

• 定义了项目在交叉轴上的对齐方式

3.6 aligin-content 属性

定义了多跟轴线的对齐方式，如果只有一跟轴线，则不起作用

项目的属性

order

项目的排序，数值越小，排序越靠前，默认是0

flex-grow

项目放大比例，默认是0

flex-shrink

缩放比例，默认为1

flex-basis

在分配多余空间之前，项目占据的主轴空间（main size）

flex

以上几个属性的简写

align-self

允许单个项目跟其他项目不一样的对齐方式，可覆盖align-items 属性

实战篇