弹性盒模型flex
程序员文章站
2022-05-02 12:19:07
一、flex flex是flexible box的缩写，意为“弹性布局”； 定义弹性布局 display:flex; 二、基本定义 我只简单的说一下容器和项目，因为只关系容器和项目来讲的（个人理解）。 三、 容器的属性 有6个属性 一下对6个容器属性的简单介绍 1. flex-direction属性 ......
一、flex
flex是flexible box的缩写，意为“弹性布局”；
定义弹性布局
display:flex;
box{
display:flex;
}
二、基本定义
我只简单的说一下容器和项目，因为只关系容器和项目来讲的（个人理解）。
三、 容器的属性
有6个属性
1. flex-direction 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6. align-content
一下对6个容器属性的简单介绍
1. flex-direction属性决定排列方向
值：
row(默认值)：水平方向，从右边开始。
row-reverse：水平方向，从右边开始。
column：垂直方向，从上到下。
column-reverse：垂直方向，从下往上
2. flex-wrap如何换行
值：
nowrap（默认值）：不换行。
wrap：换行，第一行在上面
wrap-reverse：换行。第一行在下方。
3. flex-flow是上面两个属性的缩写，默认值为row nowrap。
4. justify-content定义水平方向对齐方式
值：
flex-start(默认值)：左对齐。
flex-end：右对齐。
center：水平居中
space-between：两端对齐，项目之间间隔相等。
space-around：每个项目两侧的间隔相等。
5. align-items垂直对齐方式
flex-start：y轴的起点对齐。
flex-end：y轴的终点对齐。
center：垂直居中
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目没有设置高度或者为auto，将占满整个容器。
6. align-content定义多个轴对齐方式（这里不详细讲解虽然整个讲解都不详细）。
四、项目属性
一下6个项目属性设置在项目上。
1. order 2. flex- grow 3. flex-shrink 4. flex-basis 5. flex 6. align-self
1. order属性定义项目的排列顺序。数值越小，排列越考前，默认值为0。
2. flex- grow属性定义项目的放大比例，默认值为0，即不放大。如果项目值都为1则平均分，有个值为2其他值为1则占据剩余空间比1多一倍。
3. flex-shrink定义项目的缩小比例，默认为1，如过空间不足，项目将缩小。
4. flex-basis定义了在分配多余空间之前，项目的主轴空间。它可以设为width或height属性一样的值，则该项目占据固定的空间。
5. flex是上面2、3、4项的简写方式，默认值为0 1 auto。
6. align-self属性允许单个项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承夫元素的align-items属性，如果没有夫元素，则等同于stretch。除了auto，其他值和align-items属性完全一样。
<style>
*{
margin: 0;
padding: 0;
}
div{
border: 1px solid black;
}
.boxbig{
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.box1{
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="boxbig">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
</body>
上一篇： 2020万圣节广州长隆欢乐世界活动详情