全面了解flex的用途

    一、可以利用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

    以上就是小编为大家带来的全面了解flex的用途全部内容了,希望大家多多支持lingkb~