flex in css

dbrb71278

于 2017-05-22 10:33:00 发布

阅读量76

点赞数

原文链接：http://www.cnblogs.com/Tachi/p/6888339.html

版权

本文深入解析Flex布局的各项属性，包括container的flex-flow、justify-content、align-items等，以及child元素的order、flex-grow、flex-shrink等属性。通过理解这些属性，开发者可以更好地掌握Flex布局，实现复杂的网页布局设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// display-flex:
container:

flex-flow:flex-direction || flex-wrap'
justify-content // main axis place method - 5 values : flex-start|flex-end|center|space-between|space-around
align-items // cross axis place method(all ele as one row) - 6 values : stretch(default) | flex-start | flex-end | center | space-between | space-around
align-content //corss axis line place methos(per axis line as one row) 6 valus: stretch | flex-start | flex-end | center | space-between | space-around

child:
order: <integer>
flex-grow:<number> // default value:0 it's mains that even container remains spare space ,the child don't stretch.
flex-shrink:<number> // defalut value :1 auto condense
flex-basis : auto ?
flex: flex-grow || flex-shrink || flex-basis
align-items : // default is auto,it mains inherit parent flex property - auto | flex-start | flex-end | stretch | center | baseline

转载于:https://www.cnblogs.com/Tachi/p/6888339.html