1.需要记住的属性和值。
-------------------------------------------------------------
方向横和纵
flex-direction: row | row-reverse | column | column-reverse;
-------------------------------------------------------------
超过怎么办。
flex-wrap: nowrap | wrap | wrap-reverse;
-------------------------------------------------------------
以上两个的简写。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
-------------------------------------------------------------
justify-content属性定义了项目在主轴上的对齐方式。左对齐,右对齐,中间,两端对齐,空间-环绕。
justify-content: flex-start | flex-end | center | space-between | space-around;
-------------------------------------------------------------
align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch;
-------------------------------------------------------------
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
------------------------------------------------------------
2. CSS3 display:flex和display:box有什么区别
box 是旧属性,已经被flex代替。
flex和box都是伸缩盒,具体细节有区别。
一些浏览器可能只支持box.
由于css3还是讨论稿,所以一些属性可能随时被修改。
3.两边都是150px,中间的线的宽度自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="a50"></div>
<div id="children">
</div>
<div class="a50"></div>
</div>
<style>
#app{
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
}
#children{
flex:1;
border: 1px solid black;
}
.a50{
flex: 0 0 150px;
border: 1px solid red;
}
</style>
</body>
</html>