弹性布局1
1.flex布局,会影响子元素的布局方式
flex布局中的元素,子元素不再参加原有的流式布局,而是参加弹性布局。
flex中,无论是行元素还是块元素,都会按照flex的方向进行排列。
代码如下:
2. flex-direction:设置弹性布局中项目的排列方向。
值:
row:默认值,项目从左到右主轴排列,起点在左端。
row-reverse:项目从右到左主轴排列,起点在右端。
column:项目从上到下交叉排列,起点在顶端。
column-reverse:项目从下往上交叉轴排列,起点在下端。
代码如下:
运行结果:
3. justify-content:项目在主轴的对齐方式。
值:
dai'daima flex-start:所有项目在起始线对齐。
flex-end:所有项目在终止线对齐。
flex-scenter:所有项目在中间线对齐:居中。
space-around:项目两端间距相等,项目之间的间距相等,是项目到两端的2倍。
space-between:项目两端对齐,项目之间的间距相等
space-evenly:项目之间的间距与项目到两端的间距相等。
注意:项目从左往右排列的时候,起始线在左端,反之在右端。
代码如下: 运行结果:
4. align-items:定义当行项目在交叉轴如何对齐。
值:
center:项目在交叉轴中点对齐
flex-start:项目在交叉轴的起点对齐。
flex-end:项目在交叉轴的终点对齐。
代码如下:
运行结果:
5.弹性布局,又称flex布局,是css3.0新增的布局方式。
弹性布局,用来给盒模型提供最大的灵活性。
任何一个容器,都可以被设置弹性布局。
采用弹性布局的标签,父元素被称为flex容器,简称为“容器”;他的所有子元素自动成为容器 成员,子元素称为flex项目,称为“项目”;
flex布局的属性: 容器属性和项目属性。
容器默认存在两根轴线:水平方向的主轴和垂直方向的交叉轴。
6.完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性布局</title>
<style>
section{
border: solid 1px red;
height: 100px;
display: flex;
flex-direction: row-reverse;
justify-content:space-around;
align-items: flex-start;
}
.box{
border: solid 1px rgb(0, 255, 21);
height: 50px;
width: 100px;
}
</style>
</head>
<body>
<section>
<div class="box">第一块</div>
<div class="box">第二块</div>
<div class="box">第三块</div>
<div class="box">第四块</div>
</section>
</body>
</html>
弹性布局2
1.flex-wrap:定义项目在主轴一行排列不下时,如何换行。
值:
nowrap:默认值,不换行。
wrap;换行显示,第一行在上方。
warp-reverse;换行显示,第一行在下方。
代码如下:
运行结果:
2.align-content:定义多跟轴线在交叉轴如何对齐,如果项目只有一根轴线,则该轴线不起作用。
值:
center:多跟轴线在交叉轴的中点对齐。
flex-start;多条轴线在交叉轴的起点对齐。
flex-end:多条轴线在交叉轴的终点对齐。
space-around:轴线两端的间距相等,轴线之间的间距相等,是轴线俩端的2倍。
space-between:多条轴线两端对齐,轴线之间间距相等。
space-evenly:轴线俩端的间距与轴线之间的间距相等。
代码如下:
运行结果:
3.完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性布局2</title>
<style>
body{
margin: 0;
}
section{
height: 500px;
border: 5px solid red;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
div{
width: 33.33%;
height: 100px;
background-color: blue;
font-size: 30px;
text-align: center;
line-height: 100px;
}
div:nth-child(2n){
background-color: bisque;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</section>
</body>
</html>
PS:9个子元素,一行从左到右排列3个志愿书,3个占满一行。 flex布局默认不换行