flex---弹性布局(伸缩布局)
(1)flex布局
flex布局 | 说明 |
display: inline-flex; | 将对象作为弹性伸缩盒展示,用于行内元素 |
display: flex; | 将对象作为弹性伸缩盒展示,用于块级元素 |
(2)flex布局常用属性
常用属性 | 属性值 |
flex-direction 主轴的方向 | row|row-reverse|column|column-reverse row:默认值,水平方向从左到右排列,此时水平方向轴线为主轴 row-reverse:与row相反 column:垂直方向从上到下排列,此时垂直方向轴线为主轴 column-reverse:与column相反 |
justify-content 主轴上子项对齐方式 | flex-start | flex-end | center | space-between | space-around flex-start:默认值,与主轴开始位置对齐 flex-end:与主轴结束位置对齐 center:与主轴中间对齐 space-between:主轴方向两端对齐,中间间距相等。要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于flex-start space-around:主轴方向两端对齐,中间间距是两端间距的2倍。要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于center |
align-items 侧轴上子项对齐方式 | stretch | flex-start | flex-end | center | baseline stretch:默认值,当Flex子项未设置高度或者高度值为auto时,stretch起作用,将Flex子项高度设置为行高度。这里需要注意,在只有一行的情况下,行的高度为容器的高度,即Flex子项高度为容器的高度 flex-start:与侧轴开始位置对齐 flex-end:与侧轴的结束位置对齐 center:与侧轴中间对齐 baseline:基线对齐,当行内轴与侧轴在同一线上,即所有Flex子项的基线在同一线上时,效果等同于flex-start |
flex-wrap 指定主轴上的子项是否换行 | nowrap | wrap | wrap-reverse nowrap:默认值,表示不换行,Flex子项可能会溢出 wrap:表示换行,溢出的Flex子项会被放到下一行 wrap-reverse:表示反方向换行 |
align-content 只作用于多行的情况下,用于多行的对齐方式(侧轴) | stretch | flex-start | flex-end | center | space-between | space-around |
align-self 单独指定某Flex子项的对齐方式(侧轴) | auto | flex-start | flex-end | center | baseline | stretch |
示例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局1</title>
<style>
#box1 {
width: 500px;
height: 500px;
background-color: #ccc;
/*伸缩布局*/
display: flex;
/*主轴的方向*/
flex-direction: row;
/*主轴方向两端对齐,中间间距相等*/
justify-content: space-between;
/*用于指定Flex子项是否换行*/
flex-wrap: wrap;
/*flex-wrap: wrap-reverse;*/
/*侧轴两端对齐,中间间距相等*/
align-content: space-between;
}
.item {
background-color: gold;
margin: 5px;
}
</style>
</head>
<body>
<div id="box1">
<div class="item" style="height: 60px; width: 100px">item1</div>
<div class="item" style="height: 70px; width: 250px">item2</div>
<div class="item" style="height: 30px; width: 80px">item3</div>
<div class="item" style="height: 70px; width: 250px">item4</div>
<div class="item" style="height: 80px; width: 80px">item5</div>
<div class="item" style="height: 60px; width: 220px">item6</div>
<div class="item" style="height: 70px; width: 50px">item7</div>
<div class="item" style="height: 50px; width: 70px">item8</div>
<div class="item" style="height: 70px; width: 250px">item9</div>
<div class="item" style="height: 80px; width: 80px">item10</div>
</div>
</body>
</html>
示例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局2</title>
<style>
#box1 {
width: 400px;
height: 400px;
background-color: #ccc;
/*伸缩布局*/
display: flex;
/*主轴的方向:行*/
flex-direction: row;
/*主轴上子项对齐方式:居中*/
justify-content: center;
/*侧轴上子项对齐方式:居中*/
align-items: center;
}
.item {
background-color: skyblue;
margin: 5px;
}
.item1 {
/*单独指定某Flex子项的对齐方式(侧轴):与侧轴开始位置对齐*/
align-self: flex-start;
}
.item4 {
/*单独指定某Flex子项的对齐方式(侧轴):与侧轴的结束位置对齐*/
align-self: flex-end;
}
</style>
</head>
<body>
<div id="box1">
<div class="item item1" style="height: 60px; width: 100px">item1</div>
<div class="item" style="height: 70px; width: 50px">item2</div>
<div class="item" style="height: 80px; width: 80px">item3</div>
<div class="item item4" style="height: 70px; width: 100px">item4</div>
</div>
</body>
</html>