Open FrankKai opened 5 years ago
Place your boxes in the right place in relation to the viewport
Normal Flow也可以理解为document flow(文档流)。
独立的一个元素盒子,先由content占据内容,然后再添加padding,border和margin。
这个例子对于理解normal flow(标准流)非常有用。
<div style="writing-mode: horizontal-tb;">
<div>
<span>foo</span>
<span>bar</span>
<span>baz</span>
</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
不行。 否则当子inline元素太多,超出父block元素的宽度时,inline不能执行writing-mode制定的horizontal-tb规则,将超出的子inline元素按照top-bottom的方式排列。
display: inline-flex does not make flex items display inline. It makes the flex container display inline. Difference between display:inline-flex and display:flex
基于demo:https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html 添加一段html和一段css即可:
<section>
<article>...</article>
<article>...</article>
<article>...</article>
</section>
section {
display: inline-flex; // or flex
width: 50%;
}
display:inline-flex
如下图:
display:flex
如下图:
由此我们可以得出结论: display:inline-flex将应用了flexbox系统布局的parent flex container element(通常为block),也就是子元素,设置为inline level element。
评论: 这个属性,目前只想到左右布局情况下,左右的flex container的flex items数目不同,但是 在宽度shrink到一定程度的情况下,内容重叠。 因此这个属性不是很完美,需要其他属性打配合。
这个方向其实就是main axis,默认是row。
flex-direction: column;
还可以是row-reverse,column-reverse这两个反过来的排列。
很简单。
为flex container设置flex-wrap: wrap;
,再为flex items设置flex:200px
。
flex:200px
意思是每个flex item,宽度必须>=200px,最后一行的flex item可以200 px到占满整个flex container。
flex-direction: row;
flex-wrap: wrap;
=》flex-flow: row wrap;
flex:1;
flex:2;
flex:3;
flex:200px
和flex:2
冲突吗?不冲突,200px代表最小宽度,2代表proportion。
可以写在一起:flex: 2 200px
;,每个flex item先占据200px空间,然后再分配剩余空间。
flex是一个缩写属性,从前往后是flex-grow,flex-shrink,flex-basis。
为flex container设置以下属性。
display: flex;
align-items: center;
flex item会参照cross axis方向对齐,可以用align-self修改覆盖当前值。justify-content: space-around;
flex item在main axis方向上分配空间,此处大多数情况space-around比center更合适,因为可以直接分开flex item,并且距离main start和main end都是flex item间隔的一半,非常优雅,不要将其与justify-items和justify-self混淆了。align-items:start和end;
justify-content:flex-start和flex-end;
可以通过order:1
,order:2
这样的属性,再结合:first-child,:nth-child(n)这样的css选择器,为flex item排序,默认情况下order的值为0。
可以。demo: https://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html
article:nth-of-type(3) {
flex: 3 200px;
display: flex;
flex-flow: column;
}
article:nth-of-type(3) div:first-child {
flex:1 100px;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
}
button {
flex: 1 auto;
margin: 5px;
font-size: 18px;
line-height: 1.5;
}
Firefox, Chrome, Opera, Microsoft Edge and IE 11, newer versions of Android/iOS 都适用。
细读css-tricks flex文章: A Complete Guide to Flexbox
参考资料: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-examples