~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
此文献需要配合Bootstrap插件使用 参考Bootstrap使用手册
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属 性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009 年,W3C 提 出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它 已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能
谈到flex布局,我不知道有多少人跟我一样,在本能的想到justify-content:center与align-items:center两条属性之后,除此之外的其它属性居然显得格外陌生。
可以说包括我在内的大部分人,都是在被flex垂直水平居中方式所惊艳后才对其有所了解,以至于在日常开发中对于flex的使用,也确实更偏向于元素对齐方式的使用。
一、Flex 布局是什么?
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。
行内元素也可以使用 Flex 布局。
.box{ display: flex; }
Webkit 内核的浏览器,必须加上-webkit 前缀。
.box{ display: inline-flex; }
*设置了 Flex布局之后,子元素的 float、clear 和vertical-align失效;
.box{
display: -webkit-flex; /* Safari */ display: flex;
}
基本概念
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子 元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
容器默认存在两根轴:水平主轴(main axis)和垂直的交叉轴。主轴的开始位置(与 边框的交叉点)叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫 cross start,结束位置叫 cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴的空间 叫做cross size
容器的属性
以下6 个属性设置在容器上
flex-diretion:主轴的方向(即项目的排列方向) ;
flex-wrap:如果项目在一条轴线排不下,如何换行;
flex-flow:flex-diretion和 flex-wrap 的简写;
justify-content:项目在主轴上的对齐方式;
align-items:项目在交叉轴上的对齐;
align-content:多根轴线的对齐方式。
flex-diretion 属性 Flex-ditrtion 属性决定主轴的方向(即项目的排列方向) 。
flex-diretion:row;( 默认,主轴为水平方向,起点在左端。)
flex-diretion:row-reverse;( 主轴为水平方向,起点在右端。)
flex-direction:column;( 主轴为垂直方向,起点在上沿;)
flex-direction:colum-reverse;( 主轴为垂直方向,起点在下沿;)
初来乍到,请多多指教,大神勿喷。
flex-wrap 属性 默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap 属性定义,如果一条轴 线排不下,如何换行。 该属性可能取值以及对应的效果如下图: flex-wrap:nowrap;(默认,不换行)
flex-flows 属性 flex-flow 是 flex-direction 和 flex-wrap 属性的简写,默认值是row nowrap。
justify-content 属性 Justify-content 属性定义了项目在主轴上的对齐方式。
Justify-content:space-around;
每个项目两侧的间隔相等。所以,项目之间的间隔比 项目与边框的间隔大一倍
align-items 属性 Align-item 属性定义了项目在交叉轴上的对齐方式。
flex属性
flex 属性是 flex-grow、flex-shrink 以及 flex-basis 的缩写,默认值为 0 1 auto。后 面 2 个属性可选。 该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。 建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
align-self
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属 性。默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。 该属性可能取值:auto、flex-start、flex-end、center、stretch、baseline
除了 auto 之外,其他属性与 align-items 属性完全一致
input
附件:本文发表链接备案