CSS中的弹性盒布局(flex)
1.弹性和布局的基础知识
弹性盒布局中有两个互相垂直的坐标轴:一个称之为主轴(main axis),另外一个称之为交叉轴(cross axis)。主轴并不固定为水平方向的 X 轴,交叉轴也不固定为垂直方向的 Y 轴。main axis和cross axis的方向可以根据实际情况通过相关属性进行调整。(图中展示的为默认情况下的方向)
2.弹性盒中的元素以及属性
<div class="container">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item2"></div>
</div>
以上代码中,.container为父容器,在使用弹性盒布局时首先要为父容器设置如下代码:
.container{
display:flex
/*也可以设置为inline-flex,具体不同之处下面会进一步说明*/
}
下面通过代码对display的flex与inline-flex的效果进行展示。
<div class="container">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
</div>
<strong>Strong为行内元素</strong>
首先将.container中的display设置为flex,效果如下:
从图中可以看出,父级容器单独占一行显示。
接下来将display设置为inline-flex,显示效果如下:
父容器和平级的行内元素显示在同一行上,可以理解为inline-flex设置的父元素具有行内元素的特征。
3.弹性盒布局的具体使用方法
(详细说明在注释中给出)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* display: inline-flex; */
display: flex;
/* 决定主轴方向 row,row-reverse,column,column-reverse*/
/* flex-direction: column-reverse; */
/* 决定flex items在main items上的对齐方式 */
/* justify-content: flex-start;默认值,与main start对齐 */
/* justify-content: flex-end; */
/* justify-content: center;居中对齐 */
/* justify-content: space-between;与mian start和main end两端对齐,flex item之间距离相等 */
/* justify-content: space-evenly; ,flex items与mian start,main end之间的距离等于flex-item之间的距离*/
/* justify-content: space-around;felx-items与flex start,flex end之间的距离是flex items之间距离的一半 */
/* align-items决定在cross axis上的对齐方式 */
/* align-items: normal; flex-start,flex-end,center,baseline*/
/* align-items: center; */
/* flex-wrap,默认情况下所有的flex-items在同一行,不会换行 */
/* flex-wrap: wrap;自动换行 wrap-reverse*/
/* flex-wrap: wrap; */
/* flex-flow缩写属性flex-direction|flex-wrap */
/* align-content决定多行flex items在交叉轴上的对齐方式 */
/* align-content: flex-start;依次排开,中间不留空间 */
/* align-content: space-between; */
/* align-content: space-evenly;space-around */
width: 500px;
height: 400px;
background-color: #eaeaea;
}
.item{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.item1{
background-color: #f00;
/* 决定flex-items排列顺序,从小到大呈现 */
/* order: 10; */
/* flex-grow分配剩余空间,小数表示分得剩余空间的百分比 */
/* flex-grow: 1;默认值0 */
/* flex-shrink: ; 默认值1*/
/* flex-basis: 200px;设置主轴方向上单个flex-item的大小 */
/* flex是flex-grow|flex-shrink|flex-basis的简写 */
}
.item2{
background-color: #0f0;
/* order: 6; */
/* height: 150px; */
/* flex-grow: 1; */
}
.item3{
background-color: #00f;
/* order: 100; */
/* align-self: flex-end;单独决定cross-item的对齐方式,覆盖父元素中的align-items */
/* flex-grow: 1; */
}
</style>
</head>
<body>
<div class="box">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
</div>
<strong>strong元素</strong>
</body>
</html>
效果如下: