介绍 <李> <李>
.box {
显示:flex;
flex-wrap:包装;
text-align:中心;
}
.center {
background - color: # f00;
flex: 100% 1;
}
.left铃声{
flex: 100% 1;
}
.left {
background - color: # 0 f0;
}
铃声{
background - color: # 00 f;
}
@media所有(min-width: 400 px) {
.left铃声{
flex: 50% 1;
}
}
@media所有(min-width: 800 px) {
.box {
flex-wrap: nowrap;}
}
.center {
秩序:2;
flex: 1;
}
.left铃声{
flex: 0 0 300 px;
}
.left {
顺序:1;
}
铃声{
秩序:3;
}
} & lt; div类=癰ox"比;
& lt; div类=癱enter"祝辞
弹性盒子是CSS3的一种新的布局模式。
CSS3弹性盒(灵活的盒子或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列,对齐和分配空白空间。
& lt;/div>
& lt; div类=發eft"祝辞left
& lt; div类=皉ight"祝辞right小编给大家分享一下使用flexbox相关的CSS属性有哪些,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
默认情况下先显示移动端,通过 @media 属性适配屏幕变化
使用flexbox相关的CSS属性
显示:flex;(父元素)
<李>flex-wrap: nowrap |包装}| wrap-reverse;(父元素,子元素超出该如何显示)
<李>flex: flex-grow flex-shrink flex-basis;(子元素,子元素该如何分配空间)
<李>顺序:数量;(子元素,子元素的顺序该如何排列)
重点
在父元素上设置显示:flex 和 flex-wrap:包装
<李>通过flex 来调整子元素上的空间分配(扩展,收缩比例和伸缩基准值)
<李>通过 顺序来调整子元素的显示顺序(把。中心放在中间)
例子CSS
<强> HTML
