一, 可以利用 flex 来布局一个 div 在另一个 div 里面水平垂直居中
如: html 代码:
- <div class="container">
- <div class="box">
- </div>
- </div>
CSS 代码:
- .container{
- width:600px;
- height:400px;
- border:1px solid blue;
- display: flex;
- justify-content:center;
- align-items:center;
- }
- .box{
- width:200px;
- height:100px;
- border:1px red solid;
ps: 这样就可以水平垂直居中咯
二, flex 的属性
- <div class="items">
- <div class="item">1</div>
- <div class="item">23</div>
- <div class="item">4</div>
- </div>
可以写在 items 上的属性有六个:
•flex-direction
•flex-wrap
•flex-flow
•justify-content
•align-items
•align-content
可以写在 item 上的有 6 个:
•order// 这个就是 item 单独给了, 要是想让那个 item 调换顺序就给这个属性给那个 item
•flex-grow
•flex-shrink
•flex-basis
•flex
•align-self
来源: https://www.jb51.net/article/87430.htm