Flexbox 概述

Flexbox 布局也叫 Flex 布局,弹性盒子布局。

它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来,更简便、完整、响应式地实现各种页面布局。

它的主要思想是使父元素能够调整子元素的宽度、高度、排列方式,从而更好的适应可用的布局空间。

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

.tzy-box{
display: flex;
}

行内元素也可以使用 Flex 布局。

.tzy-box{
display: inline-flex;
}

Webkit 内核的浏览器,必须加上-webkit前缀。

.tzy-box{
display: -webkit-flex; /* Safari */
display: flex;
}

注意,设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。当布局涉及到不定宽度,分布对⻬的场景时,我们可以优先考虑弹性盒布局。

基本概念

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”。它的所有 子元素(注意是子元素,不是全部后代元素)自动成为容器成员,称为 Flex 项目(flex item),简称”项目”。


未完待续,敬请期待~~