Flex布局

原创
2017/04/17 17:56
阅读数 599

 一、概念

  1. Flex:伸缩布局,将对象作为弹性伸缩盒展示,常用于响应式布局。
  2. 优点:灵活的响应式属性和排版布局,可以很简单地达到“垂直居中”这样的布局。
  3. 缺点:css3新属性,兼容性一直是个大问题。

二、起步

  1. html结构:
    <div class="flex-container box">
    	<div class="flex-item">item_1</div>
    	<div class="flex-item">item_2</div>
    	<div class="flex-item">item_3</div>
    </div>
  2. css兼容性写法:
    .flex-container {
    	display: flex;				/* Chrome 21+,Opera 12.1+,FireFox 22+,Safari 6.1+,IE 10+ */
    	display: -webkit-flex; 		/* IOS 6-, safari 3.1-6,old chrome */
    	display: -moz-box;			/* Firfox 19- */
    	display: -ms-flexbox;		/* IE 10- */
    }
  3. 预期结果:

        

    当一个元素被display:flex的时候,它默认有两条主轴来决定它的子元素的布局:

  • 主轴:水平方向轴,默认为从左到右的方向,它的子元素从左侧“主轴start”到右侧“主轴end”依次排列。
  • 侧轴:垂直方向轴,默认从上到下的方向。
  • 主轴空间size:单个子元素所占的主轴空间。
  • 侧轴空间size:单个子元素所占的侧轴空间。

三、容器属性

     1.属性总览:有6个属性可以设置在display:flex的容器上。

.flex-container {
	flex-direction: row | row-reverse | column | column-reverse;
	flex-wrap: nowrap | wrap | wrap-reverse;
	flex-flow: <'flex-direction'> || <'flex-wrap'>;
	justify-content: flex-start | flex-end | center | space-between | space-around;
	align-items: flex-start | flex-end | center | baseline | stretch ;
	align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

    2.flex-direction: 主轴方向

  • row(默认值):主轴为水平方向,即横向从左到右排列。
  • row-reverse:主轴为水平方向,但排列方向与row相反,即从右到左。
  • column:主轴为垂直方向,即从上往下排列。
  • column-reverse:主轴为垂直方向,但排列方向与column相反,即从下往上。

        

        

       

        

     3.flex-wrap:控制flex容器的子元素当在一行放不下的时候,是单行显示还是多行显示

  • nowrap(默认值):flex容器为单行,该情况下flex子元素可能会溢出容器。
  • wrap:flex容器为多行,flex子元素溢出部分被放置到新的一行。
  • wrap-reverse:flex容器为多行,但是子元素排列方向与wrap相反。

     

        

        

      4.flex-flow: flex-direction与flex-wrap的连写形式

.flex-container {
	flex-direction: row;
	flex-wrap: nowrap;
}
/*连写形式*/
.flex-container {
	flex-flow: row nowrap;
}

      5.justify-content:flex子元素在主轴方向上的对齐方式

  • flex-start(默认值): 在主轴起始处(主轴start)对齐。
  • flex-end:在主轴结束处(主轴end)对齐。
  • center:居中对齐。
  • space-between:两端边界对齐,即第一个flex子元素与主轴start对齐,最后一个flex子元素与主轴end对齐,剩余子元素则平均分布,子元素两两间空白平等。
  • space-around:两端边界对齐,但是子元素两侧间隔相等。

        

        

        

        

        

      6.align-items:flex子元素在侧轴方向上的对齐方式

  • flex-start:在侧轴起始处(侧轴start)对齐。
  • flex-end:在侧轴结束处(侧轴end)对齐。
  • center:侧轴方向居中对齐。
  • baseline:以flex子元素中第一行文字基线对齐。
  • stretch(默认值):伸缩对齐,如果flex子元素未设置height或者height为auto,则flex子元素高度为flex容器高度。

        

        

        

        

        

四、flex子元素属性

      1.属性总览:共有6个属性可以设置在flex容器的子元素上。

.flex-item {
	order: 0 | <integer>;
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
	flex-grow: 0 | <number>;
	flex-shrink: 1 | <number>;
	flex-basis: auto | content | <length> | <percentage>;
	flex: none | <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>;
}

      2.order:用整数值来决定flex子元素的排列顺序,数值小的排前面,可以为负值。

        

      3.align-self:定义flex子元素单独在侧轴方向上的对齐方式,如果为默认值auto,则继承父元素的align-items。

        

        

      4.flex-grow:设置flex子元素的放大比率,默认值为0,即flex容器存在剩余空间,也不放大。

        

        

        

      5.flex-shrink:设置flex子元素额缩小比率,默认值为1,即flex容器空间不足,子元素将缩小。为0时,该子元素不缩小。

        

        

        6.flex-basis: 定义在分配flex容器剩余空间之前,子元素所占的的大小(主轴空间size)。

  • auto(默认值):即子元素原始大小。
  • length:用px来定义宽度。
  • percentage:用百分比来定义宽度。
  • content:基于子元素的内容来计算宽度。

        

        7.flex:flex-grow,flex-shrink,flex-basis连写形式。

.flex-item {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
}
/*连写为*/
.flex-item {
	flex: 0 1 auto;
}
  • flex:none: 计算值为flex:0 0 auto;
  • flex:1:计算值为flex:1 1 0%;
  • flex:auto:计算值为 flex:1 1 auto;
  • flex:0 auto || initial:计算值为 flex:0 1 auto,即flex 初始值。

        flex布局虽然存在兼容性问题,但并不能掩盖它如此令人着迷的强大功能,在对浏览器兼容性要求不高的后台管理页面和手机h5页面,可以大胆使用,毕竟chrome和高版本的ios和android对它的支持性非常好。

        我把flex属性归总到https://helsingvan.github.io/test/cssSkill/flex.html  便于大家浏览。

        欢迎大家提意见。

展开阅读全文
打赏
0
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部