一、Flex 布局是什么?
CSS3引入了一种新的布局模式——Flexbox布局,即伸缩盒模型布局(Flexible Box)模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使它们的大小是未知或者动态的,这里简称Flex。
CSS3引入的布局模式Flex布局,主要思想是让容器有能力让其子项目能够改变其 宽度 、 高度 、 顺序 ,以最佳的方式填充可用空间。Flex容器会使子项目(伸缩项目)扩展来填满可用空间,或缩小它们以防止溢出容器。
任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
}
行内元素也可以使用 Flex 布局。
.box{
display: inline-flex;
}
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
设为 Flex 布局以后,CSS的 columns 在伸缩容器上没有效果。子元素(伸缩项目)的 float 、 clear 和 vertical-align 属性将失效
Flex布局在定义伸缩项目大小时伸缩容器会预留一些可用空间,可以调节伸缩项目的相对大小和位置。例如,可以 确保伸缩容器中的多余空间平均分配多个伸缩项目。如果伸缩容器没有足够大的空间放置伸缩项目时,浏览器会根据一定的比例减少伸缩项目的大小,使其不溢出伸缩容器。
二、Flex基本概念和模型中的术语
和CSS3其他属性不一样,Flexbox并不是一个属性,而是一个模块,包括多个CSS3属性,涉及东西较多,包括整个组属性,要了解新的术语和概念才能学好Flex布局。
在Flexbox模型中与布局计算偏向使用书写模式方向的块布局和行内布局不同,伸缩布局偏向使用伸缩流的方向。为了让描述伸缩布局变得更容易,本章定义一系列相对于伸缩流的术语。如下图:
图片介绍
主轴、主轴方向:沿着一个伸缩容器的主轴配置伸缩项目,主轴是主轴方向的延伸。伸缩容器额主轴,伸缩项目主要沿着这条轴进行布局。重要,它不一定是水平的,这主要取决于 flex-direction 属性。如果其取值为 column ,主轴的方向为纵向的。
主轴起点、主轴终点:伸缩项目的配置从容器的主轴起点边开始,往主轴终点边结束。也就是说,伸缩项目放置在伸缩容器内从主轴起点( main-start )向主轴终点( main-end )方向。
主轴长度、主轴长度属性:伸缩项目在主轴的方向的宽度或高度就是项目的主轴长度,伸缩项目的主轴长度属性是 width 或 height 属性,由哪一个对着主轴的方向决定。
侧轴、侧轴方向:与主轴垂直的轴称做侧轴,侧轴是侧轴方向的延伸。主要取决于主轴的方向。
侧轴起点、侧轴终点:伸缩项目的配置从容器的侧轴起点边开始,往侧轴终点边结束。也就是说,伸缩项目放置在伸缩容器内从侧轴起点( cross-start )向侧轴终点( cross-end )方向。
侧轴长度、侧轴长度属性:伸缩项目在侧轴的方向的宽度或高度就是项目的侧轴长度,伸缩项目的侧轴长度属性是 width 或 height 属性,由哪一个对着侧轴的方向决定。
通过设置 display 属性显式地给一个元素设置为 flex 或者 inline-flex ,这个容器就是一个伸缩容器。其中设置为 flex 的容器被渲染成为一个块级元素,而设置为 inline-flex 的容器则渲染为一个行内元素。若元素的 display 的指定值是 inline-flex 且元素是一个浮动或