flexbox弹性盒模型
给父级添加flex
display: flex;
换行 flex-wrap: wrap;
flex-direction: ; 元素主轴的方向,默认值row,从左到右
row-reverse 从右到左
column从上到下
column-reverse 从下到上
flex-direction:column-reverse
主轴方向对齐方式 justify-content: space-around;
交叉轴对齐方式 align-items: flex-start;
换行之后交叉轴方向排布;默认值stretch,剩下的区域会被等分
align-content: center;
等比例计算,等比例缩放
<style>
.fa{
width: 400px;
height: 400px;
background-color: aqua;
/* 给父级添加flex */
display: flex;
/* 换行 */
flex-wrap: wrap;
/* flex-direction: ; 元素主轴的方向,默认值row,从左到右 */
/* row-reverse 从右到左 */
/* column从上到下 */
/* column-reverse 从下到上 */
/* flex-direction:column-reverse; */
/* 主轴方向对齐方式 */
justify-content: space-around;
/* 交叉轴对齐方式 */
align-items: flex-start;
/* 换行之后交叉轴方向排布;默认值stretch,剩下的区域会被等分 */
align-content: center;
}
.fa>div{
width: 100px;
height: 100px;
}
.son1{
background-color: blanchedalmond;
}
.son2{
background-color: blueviolet;
}
.son3{
background-color: brown;
}
</style>
</head>
<body>
<div class="fa">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>
</body>
</html>
弹性增长因子flex-grow 要给在子集才起作用给父级是不可以的
弹性增长因子 值越大增长得越大
flex-grow: ;
<style>
.fa{
width: 400px;
height: 400px;
display: flex;
background-color: darkblue;
}
.fa>div{
width: 50px;
height: 100px;
}
.son1{
background-color: brown;
/* 弹性增长因子 值越大增长得越大*/
/* flex-grow: 1; */
}
.son2{
background-color: burlywood;
/* flex-grow: 2; */
}
.son3{
background-color: chartreuse;
/* flex-grow: 3; */
}
.son4{
background-color: cornflowerblue;
/* flex-grow: 4; */
}
</style>
</head>
<body>
<div class="fa">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
<div class="son4"></div>
</div>
弹性缩放因子 flex-shrink 要给在子集才起作用给父级是不可以的**
值越大缩的越多
<style>
.fa{
width: 400px;
height: 400px;
display: flex;
background-color: darkblue;
}
.fa>div{
width: 150px;
height: 100px;
}
.son1{
background-color: brown;
/* flex-shrink (弹性缩放因子) 值越大就缩的越多 */
flex-shrink: 1;
}
.son2{
background-color: burlywood;
flex-shrink: 2;
}
.son3{
background-color: chartreuse;
flex-shrink: 3;
}
.son4{
background-color: cornflowerblue;
flex-shrink: 5;
}
</style>
</head>
<body>
<div class="fa">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
<div class="son4"></div>
</div>
</body>
弹性盒子内的子元素的大小属性 Flex:属性
虽然值是数字,但是要尽量避免去使用数字设置 ,因为浏览器要进行计算
auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none:计算值为 0 0 auto
inherit:从父元素继承
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
flex: flex-grow flex-shrink flex-basis;
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
<style>
.fa{
width: 400px;
height: 400px;
display: flex;
background-color: darkblue;
}
.fa>div{
width: 50px;
height: 100px;
}
.son1{
background-color: brown;
/* flex: flex-grow flex-shrink felx-basis */
/* 虽然值是数字,但是要尽量避免去使用数字设置 ,因为浏览器要进行计算 */
/* auto:1 1 auto */
/* initial: 计算值为 0 1 auto */
/* none:计算值为 0 0 auto */
/* inherit:从父元素继承 */
flex:auto ;
}
.son2{
background-color: burlywood;
flex: initial;
}
.son3{
background-color: chartreuse;
flex:initial ;
}
.son4{
background-color: cornflowerblue;
flex: none;
}
</style>
</head>
<body>
<div class="fa">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
<div class="son4"></div>
</div>
</body>
定义项目排序顺序order
<style>
.fa{
width: 400px;
height: 400px;
display: flex;
background-color: darkblue;
}
.fa>div{
width: 50px;
height: 100px;
}
.son1{
background-color: brown;
/* 定义项目排序顺序 */
order: 1;
}
.son2{
background-color: burlywood;
order: 3;
}
.son3{
background-color: chartreuse;
order: 4;
}
.son4{
background-color: cornflowerblue;
order: 2;
}
</style>
</head>
<body>
<div class="fa">
<div class="son1">1</div>
<div class="son2">2</div>
<div class="son3">3</div>
<div class="son4">4</div>
</div>
</body>
弹性盒子内的单个子元素在纵轴的顺序 align-self属性
auto:如果’align-self’的值为’auto’,则其计算值为元素的父元素的’align-items’值,如果其没有父元素,则计算值为’stretch’。
flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。
stretch:如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。