1.弹性布局简介
1.1 了解两个基本概念:
① 容器: 需要添加弹性布局的父元素;
② 项目: 弹性布局容器中的每一个子元素,称为项目;
1.2 了解两个基本方向:
① 主轴: 在弹性布局中,我们会通过属性规定水平/垂直方向为主轴;
② 交叉轴: 与主轴垂直的另一方向,称为交叉轴
2.弹性布局的使用
① 给父容器添加display: flex/inline-flex;属性,即可使容器内容采用弹性布局显示,而不遵循常规文档流的显示方式;
② 容器添加弹性布局后,仅仅是容器内容(项目)采用弹性布局,而容器自身在文档流中的定位方式依然遵循常规文档流;
③ display:flex; 容器添加弹性布局后,显示为块级元素;
display:inline-flex; 容器添加弹性布局后,显示为行级元素;
④ 设为 Flex布局后,子元素的float、clear和vertical-align属性将失效。但是position属性,依然生效。
3.display: flex;使用的12大属性。其中,12个属性分为两类,6个作用于父容器,6个作用于子项目。
4.作用于父容器的6大属性
①flex-direction属性决定主轴的方向(即项目的排列方向)
-
row(默认值): 主轴为水平方向,起点在左端;
-
row-reverse: 主轴在水平方向,起点在右端 ;
-
column:主轴为垂直方向,起点在上沿。
-
column-reverse:主轴为垂直方向,起点在下沿。
例子1. 写一个弹性盒子 高和宽为200px 默认主轴为水平方向,起点在左端
:
例子2. row-reverse: 主轴在水平方向,起点在右端 ;
例子3 .column:主轴为垂直方向,起点在上沿。
lizi
例子4. column-reverse:主轴为垂直方向,起点在下沿。
② flex-wrap属性定义,如果一条轴线排不下,如何换行。
- nowrap(默认):不换行。当容器宽度不够时,每个项目会被挤压宽度;
- wrap: 换行,并且第一行在容器最上方;
- wrap-reverse: 换行,并且第一行在容器最下方。
例子1.布局一个弹性盒子 高和宽为200px 每个子div的高和宽为50px