Flex 容器的属性
2021-05-10 本文已影响0人
my木子
<!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>Document</title>
</head>
<style>
.box {
width: 100%;
height: 100vh;
display: flex;
/* flex-direction 属性决定主轴的方向（即项目的排列方向） */
/* flex-direction: row（默认） | row-reverse | column | column-reverse; */
/* 子元素水平靠左正序排列 123*/
/* flex-direction: row; */
/* 子元素水平靠右倒序排列 321*/
/* flex-direction: row-reverse; */
/* 子元素竖直靠左正序排列 123*/
/* flex-direction: column; */
/* 子元素竖直靠左倒序排列 321 */
/* flex-direction: column-reverse; */
/* flex-wrap 属性定义了如果一条轴线排不下，如何换行 */
/* flex-wrap: nowrap（默认） | wrap | wrap-reverse; */
/* 子元素宽失效，等比例一行排列，不换行 */
/* flex-wrap: nowrap; */
/* 子元素换行，第一行在上方 */
/* flex-wrap: wrap; */
/* 子元素换行，第一行在下方 */
/* flex-wrap: wrap-reverse; */
/* justify-content 属性定义了项目在x轴上的对齐方式 */
/* justify-content: flex-start（默认值） | flex-end | center | space-between | space-around; */
/* 子元素左对齐 */
/* justify-content: flex-start; */
/* 子元素右对齐 */
/* justify-content: flex-end; */
/* 子元素居中 */
/* justify-content: center; */
/* 子元素两端对齐，项目之间的间隔都相等 */
/* justify-content: space-between; */
/* 子元素两侧的间隔相等 */
/* justify-content: space-around; */
/* align-items属性定义项目在交叉轴上如何对齐，注意父元素的高度 */
/* align-items: flex-start | flex-end | center | baseline | stretch; */
/* 子元素正序置顶，并且顶部与父元素顶部相邻 */
/* align-items: flex-start; */
/* 子元素正序置底，并且顶部与父元素底部相邻 */
/* align-items: flex-end; */
/* 子元素正序居中，并且左侧与父元素左侧相邻 */
/* align-items: center; */
/* 子元素的第一行文字的基线对齐 */
/* align-items: baseline; */
/* 如果子元素未设置高度或设为auto，将占满整个容器的高度 */
/* align-items: stretch; */
}
.item div:nth-child(2) {
/* align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch */
/* align-self: auto | flex-start | flex-end | center | baseline | stretch; */
}
.item {
width: 200px;
height: 200px;
background: #888;
text-align: center;
line-height: 200px;
font-size: 40px;
border: 1px solid #666;
flex: 1;
}
.item1 {
flex: 0 0 10%;
}
.item2 {
flex: 0 0 50%;
}
</style>
<body>
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item ">2</div>
<div class="item">2</div>
<div class="item ">2</div>
</div>
</body>
</html>
