flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style type="text/css">
.container {
width: 600px;
height: 600px;
border: 1px solid black;
margin: 0 auto;
}
.item {
/*width: 200px;*/
/*height: 200px;*/
/*border-radius: 50%;*/
background-color: orange;
font-size: 80px;
}
/*容器:规定容器为flex,则容器内的标签会成为该容器的项目(item)*/
.container {
display: flex;
}
.item {
/*默认只能一行排列,所有item总宽不允许超出container宽度*/
/*width: 300px;*/
/*默认情况下item可以不规定高度,高度会自适应父级*/
/*item没有设置宽度下,可以通过flex-grow决定对于父级的占比*/
}
/*.it1, .it3 {
flex-grow: 1;
}
.it2 {
flex-grow: 3;
background-color: pink
}*/
/*container属性*/
.container {
/*flex-direction: row | row-reverse | column | column-reverse; 方向*/
/*flex-direction: column-reverse;*/
/*flex-wrap: nowrap | wrap | wrap-reverse;换行方式*/
/*flex-wrap: wrap;*/
/*justify-content: flex-start | flex-end | center | space-between | space-around;水平对齐方式*/
/*item为沾满父级区域*/
justify-content: space-around;
}
/*item属性*/
.item {
/*width: 300px;
height: 200px;*/
}
.item {
width: 100px;
}
</style>
<!-- 总结 -->
<!-- 1.将父级display属性设置为flex,则父级成为container,子级成为item -->
<!-- 2.container设置item的排列方向flex-direction -->
<!-- 3.item对于container的空间占比flex-grow -->
</head>
<body>
<!-- 学习目的: -->
<!-- 之前学习的盒模型布局(display) float布局 position都不能很好的解决block垂直居中的问题,flex布局擅长 -->
<div class="container">
<div class="item it1">1</div>
<div class="item it2">2</div>
<div class="item it3">3</div>
</div>
</body>
</html>
