CSS弹性盒模型flex在布局中的应用
程序员文章站
2022-03-11 13:34:22
...
前面的话
前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法,本文将介绍flex在布局中的应用
元素居中
【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items
style>
.parent{
display: flex;
justify-content: center;
align-items: center;
}
style>
div class="parent" style="background-color: lightgrey; height: 100px; width: 200px;">
div class="in" style="background-color: lightblue;">DEMOdiv>
div>
【2】在伸缩项目上使用margin:auto
style>
.parent{
display: flex;
}
.in{
margin: auto;
}
style>
div class="parent" style="background-color: lightgrey;height: 100px;width: 200px;">
div class="in" style="background-color: lightblue;">DEMOdiv>
div>
两端对齐
style>
.parent{
display: flex;
justify-content:space-between
}
style>
div class="parent" style="background-color: lightgrey;height: 100px;width: 200px;">
div class="in" style="background-color: lightblue;">DEMOdiv>
div class="in" style="background-color: lightgreen;">DEMOdiv>
div class="in" style="background-color: lightcyan;">DEMOdiv>
div class="in" style="background-color: lightseagreen;">DEMOdiv>
div>
底端对齐
style>
.parent{
display: flex;
align-items: flex-end;
}
style>
div class="parent" style="background-color: lightgrey;height: 100px;width: 200px;">
div class="in" style="background-color: lightblue; height:20px;">DEMOdiv>
div class="in" style="background-color: lightgreen; height:30px;">DEMOdiv>
div class="in" style="background-color: lightcyan; height:40px;">DEMOdiv>
div class="in" style="background-color: lightseagreen; height:50px;">DEMOdiv>
div>
输入框按钮
style>
.inputBox{
display: flex;
width: 250px;
}
.inputBox-ipt{
flex: 1;
}
style>
div class="inputBox">
input class="inputBox-ipt">
button class="inputBox-btn">按钮button>
div>
等分布局
style>
body,p{margin: 0;}
.parent{
display: flex;
}
.child{
flex:1;
height: 100px;
}
.child + .child{
margin-left: 20px;
}
style>
div class="parent" style="background-color: lightgrey;">
div class="child" style="background-color: lightblue;">1div>
div class="child" style="background-color: lightgreen;">2div>
div class="child" style="background-color: lightsalmon;">3div>
div class="child" style="background-color: pink;">4div>
div>
多列自适应布局
style>
p{margin: 0;}
.parent{display: flex;}
.left,.center{margin-right: 20px;}
.right{flex: 1;}
style>
div class="parent" style="background-color: lightgrey;">
div class="left" style="background-color: lightblue;">
p>leftp>
p>leftp>
div>
div class="center" style="background-color: pink;">
p>centerp>
p>centerp>
div>
div class="right" style="background-color: lightgreen;">
p>rightp>
p>rightp>
div>
div>
悬挂布局
style>
.box{
display: flex;
background-color: lightgrey;
width: 300px;
}
.left{
margin-right: 20px;
background-color: lightblue;
height: 30px;
}
.main{
flex:1;
}
style>
div class="box">
div class="left">左侧悬挂div>
div class="main">主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容div>
div>
全屏布局
style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.parent{
display: flex;
flex-direction: column;
}
.top,.bottom{
height: 50px;
}
.middle{
display: flex;
flex: 1;
}
.left{
width: 100px;
margin-right: 20px;
}
.right{
flex: 1;
overflow: auto;
}
.right-in{
height: 1000px;
}
style>
div class="parent" id="parent" style="background-color: lightgrey;">
div class="top" style="background-color: lightblue;">
p>topp>
div>
div class="middle" style="background-color: pink;">
div class="left" style="background-color: orange;">
p>leftp>
div>
div class="right" style="background-color: lightsalmon;">
div class="right-in">
p>rightp>
div>
div>
div>
div class="bottom" style="background-color: lightgreen;">
p>bottomp>
div>
div>
上一篇: 详解前端在html页面之间传递参数的方法
下一篇: 关于高德地图WEB版基础控件的展示
推荐阅读
-
实例讲解CSS3中的box-flex弹性盒属性布局
-
几个CSS3的flex弹性盒模型布局的简单例子演示
-
rem在响应式布局中的应用_html/css_WEB-ITnose
-
浅谈CSS属性之布局--flex布局<弹性盒模型>
-
rem在响应式布局中的应用_html/css_WEB-ITnose
-
在CSS中Box Model盒模型中的边距图文详解
-
在html中div+css布局的简单应用(适合初学者了解)_html/css_WEB-ITnose
-
CSS弹性盒模型flex在布局中的应用
-
CSS3中弹性盒布局的最新版_html/css_WEB-ITnose
-
React Native中的弹性盒模型(Flexbox)_html/css_WEB-ITnose