1、flex 布局的概念
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 inline-flex 使属性值用 Flex 布局。
inline-flex 和 inline-block 一样,对设置了该属性值的元素的子元素来说是个 display:flex 的容器,对外部元素来说是个 inline 的块。
.box{ display: flex; } .inlinebox{ display: inline-flex; }
设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
下面将元素分为容器和子元素,设置了 display 属性的即为容器,容器内部的元素即为子元素也称为项目。
2、具有flex属性的容器的属性
设置了 flex 属性的容器可以通过设置其他属性值来设置容器的子元素的排列
以下6个属性可以设置在容器上:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
2.1、flex-direction
flex-direction 属性决定子元素的排列方向,该属性可以有四个属性值:
row
(默认值):主轴为水平方向,起点在左端;row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上沿。column-reverse
:主轴为垂直方向,起点在下沿。
.box { flex-direction: row | row-reverse | column | column-reverse; }
<div class="test02"> <div class="children"> <p>1</p> </div> <div class="children"> <p>2</p> </div> <div class="children"> <p>3</p> </div> </div>
.test02 { display: flex; flex-direction: row | row-reverse | column | column-reverse; } .test02 .children{ width: 50px; height: 50px; }
下面分别是设置 flex-direction 为 row、 row-reverse、 column、 column-reverse 的情况:
2.2、flex-wrap属性
让弹性盒的子元素在必要的时候拆行,当不设置该属性值的话默认值是不换行的,如果容器装不下子元素的话子元素会进行相应的收缩。有三个属性值:
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
nowrap
(默认):不换行。 wrap
:换行,第一行在上方。 wrap-reverse
:换行,第一行在下方。下面分别对应:
2.3、flex-flow 属性
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性,默认值为 row nowrap。当然,该属性也可以只设置其中一个属性值。
.box { flex-flow: <flex-direction> || <flex-wrap>; }
2.4、justify-content属性
justify-content 属性定义了项目在主轴上的对齐方式。
.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
flex-start(默认值):左对齐; flex-end:右对齐; center: 居中; space-between:两端对齐,项目之间的间隔都相等;
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
原文地址:https://www.cnblogs.com/wenxuehai/p/10485258.html