css如何让两个div上下排列_如何讲清楚Flex弹性盒模型？
（上）
⼀、什么是Flex弹性盒？
“弹性布局”，⽤来为盒状模型提供最⼤的灵活性。
Flex弹性盒，意为“弹性布局”
Flex弹性盒
display:flex 的时候，内部元素float会失效，vertical-align也会失效
当⼀个元素 display:flex
因此我们⾄少能确定⼀点，flex替代了浮动的解决⽅案。
我们来看⼀下它的基本特点。
flex容器当中，div这样的块元素不再独占⼀⾏
在flex容器
⽽是⾃动排成⼀⾏。
这个效果虽然和浮动很像, 但是请记住, 在flex的容器⾥, 不存在浮动的概念, 我将代码贴出来, ⼤家可以⾃⾏尝试.
<style type="text/css">
html, body {
padding: 0; margin: 15px;
}
.container {
display: flex;
height: 300px; width: 700px;
box-shadow: 0 0 0 1px black;
}
div {
width: 200px; height: 200px;
}
div:nth-child(1) {
background-color: pink;
}
div:nth-child(2) {
background-color: lightseagreen;
}
div:nth-child(3) {
flex布局对齐方式
background-color: powderblue;
}
</style>
<body>
<section class="container">
<div>
<p>div容器</p>
<p>width: 100px</p>
<p>height: 100px</p>
</div>
<div>
<p>div容器</p>
<p>width: 100px</p>
<p>height: 100px</p>
</div>
<div>
<p>div容器</p>
<p>width: 100px</p>
<p>height: 100px</p>
</div>
</section>
</body>
Flex项⽬（flex item）。dispplay: flex的元素，称为Flex容器
Flex容器（flex container），它的所有⼦元素称为Flex项⽬
flex-direction属性进⾏更改
在flex容器当中, 项⽬的排列⽅式默认是row(⽔平的). 可以使⽤flex-direction属性
.container {
display: flex;
flex-direction: row;  /*这是默认值, 按照row(⽔平⽅向)排列*/
}
如果将这个属性进⾏更改column
.container {
display: flex;
flex-direction: column;  /* 按照列column(垂直⽅向)排列*/
}
效果如下:
flex容器⾥的项⽬
你看, flex容器
对于⼀个flex容器来说, ⼦项⽬的排列⽅向, 只有row和column这两种，怎么样, 很简单把?
当然, 项⽬不仅可以从左向右, 还可以反过来, 从右向左
.container{
display: flex;
flex-direction: row-reverse;/* 按照⾏(反⽅向)排列*/
}
效果如下:
垂直⽅向也是如此
.container{
display: flex;
flex-direction: column-reverse;/* 按照列(反⽅向)排列*/
}
⼀个flex容器, ⼦项⽬默认是不换⾏的
flex-wrap属性可以修改
当然, 想要换⾏的话, 可以通过flex-wrap属性
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
justify-content属性 设置「主轴」的对齐⽅式
我们还可以通过 justify-content属性 设置「主轴」的对齐⽅式
注意：主轴的⽅向不⼀定是⽔平⽅向它是由flex-direction决定的. 可以是 row⽅向 也可以 column⽅向, 下⾯的例⼦假定主轴为row, 因此column⽅向为对应 侧轴
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start 可以理解为左对齐
flex-end 可以理解为右对齐
center 居中对齐
space-between 两侧对齐
space-around 两侧间隔均匀
的对齐⽅式如果flex容器是固定⾼度的, 且⼤于了⼦元素, 这时, 我们可能还需要侧轴
侧轴(垂直⽅向)的对齐⽅式 align-items属性定义项⽬在交叉轴上如何对齐。
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start 可以理解为顶部对齐
flex-end 底部对齐

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。