CSS3中更灵活的布局方式

flex是一个灵活性强的布局方式,它能够很好的控制内部元素的宽度,高度或者剩余的空间部分,来适应不同的显示设备和不同的屏幕尺寸,而真正达到一种自适应效果.

flex布局与常规布局截然不同,常规布局虽然在页面上显示很好,但对于大而复杂的项目,在方向改变,自适应大小,伸展和收缩等方面缺乏灵活性,flex最适合作为应用程序的组件,小规模布局使用;网格布局适用大规模布局.

flex整个模块不只是一个属性,它涉及很多东西以及一系列属性.设置为flex标签的被称为flex容器,而这个容器内的子节点元素称为flex项.

如果常规布局是基于块和内联布局的话,flex可以称为flex流方向布局

我们来看看下面这个图例,来解释flex布局的相关思想

我们先来看整个盒子,盒子里有两个元素1,2;这时候我们还未对其做flex定义,也就没有其他的术语来定义盒子中的元素.

现在我们把盒子定义为flex,这时候看两个条红色方向线条,

main-axis: 横向称为主轴,

cross axis: 纵向相对于主轴来说,称为交叉轴,

1,2 两个子盒子: 称为为flex项.

这里我们继续看下,蓝色的部分main start,main end,cross start,cross end是布局(主轴,交叉轴)方向的开始,结束位置.

main start: 主轴布局开始位置

main end: 主轴布局结束位置

cross start: 交叉轴布局开始位置

cross end : 交叉轴布局结束位置

main size: flex项在主轴布局上的大小

cross size: flex项在交叉轴布局上的大小

下面我们来看下容器和flex项的主要属性,以及他们的作用.

我们先来了解容器的相关属性,及作用.下面这个图,我们定义一个flex容器.

  • display

display:flex /*inline-flex*/

定义容器为flex布局,块状还是内联取决于属性值,flex为块状,inline-flex为内联


  • flex-direction

建立主轴及方向,定义flex项在容器的布局位置.flex盒子是单方向的布局模式.也就是说flex项要么是布局在水平方向要么就是垂直方向.

flex-direction:row | row-reverse | column | column-reverse;

row : 这个是默认值,从左至右的布局
row-reverse: 从右至左的布局
column : 从上到下
column-reverse: 从下到上


  • flex-wrap

从图来看是一种流的方式,默认是将flex项尽量放置在一行上.当然我们也可以改变和根据需要来设置属性.

flex-wrap:nowrap | wrap | wrap-reverse;

nowrap: 默认值,单行模式,从左至右
wrap: 多行模式(换行)从左至右
wrap-reverse: 多行(换行)模式,从右至左.


  • flex-flow

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

这个属性是flex-directionflex-wrap的合并写法,属性默认值为 row nowrap


  • justify-content

设定flex项沿着主轴对齐.控制flex项之间的多余空间.

justify-content: flex-start | flex-end | center | space-between | space-around;

flext-start: 默认值,左对齐
flex-end: 右对齐
center: 居中
space-between: 两端对齐
space-around: 两边flex项与容器的边缘距离相等,但每个项之间的距离是边缘距离的两倍,每个项之间的距离相等


  • align-items

设定flex项交叉轴上的对齐方式.相对于justify-content的布局方式

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start: 对齐交叉轴的开始位置
flex-end: 对齐交叉轴的结束位置
center: 对齐交叉轴上的中间位置
baseline: 基线对齐方式
stretch : 默认值,填充整个容器(但仍然依循min-width/max-width)


  • align-content

相对于交叉轴上的对齐方式,类似于主轴上的对齐方式justify-content. 如果容器里只有一条轴上的项,那属性不起作用.

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-start: 基于交叉轴开始位置对齐
flex-end: 基于交叉轴结束位置对齐
center: 基于交叉轴中间对齐
space-between: 交叉轴两端对齐
space-around: 每个项在交叉轴的距离相等
stretch: 默认值,项占满容器交叉轴

主容器里的属性,我们了解完后,继续看flex项的属性及作用.

  • order

order: <integer>;

默认情况下,flex项按照先后顺序布局.order 用来控制flex项在容器中的顺序.


  • flex-grow

该属性为每项增加了伸张能力,它的值接受一个无单位的数字值,作为比例.规定某各项需占用的比例空间. 如果所有项的flex-grow值为1,则它们将平分剩余空间(如果有的话)。如果一个项的flex-grow值为2,其他每项值都为1,值为2的项占据的剩余空间将比其他项多一倍。

flex-grow:<number>; /* default 0 */

默认值是0,值为0的时候,每项的占用空间不变(原始大小).属性值,负数无效.


  • flex-shrink

属性为每项增加了收缩能力.类似flex-grow,属性值,负数无效

flex-shrink:; /* default 1 */


  • flex-basis

在分配剩余空间之前,定义元素的默认大小.值可以是一个长度,例如30%,5rem,等等,或者一个关键词.值为auto,看起来像"width或者height的值auto"

flex-basis: <length> | auto; /* default auto */

如果设置为0,围绕内容的额外空间不考虑在内.如果值为auto,额外空间基于flex-grow值来分配.


  • flex

这个是flex-grow,flex-shrink和flex-basis的合并写法.这第二个和第三个的参数是可选值.默认值是: 0 1 auto

flex: none | [ <‘flex-grow‘> <‘flex-shrink‘>? || <‘flex-basis‘> ]

推荐使用这个合并写法.


  • align-self

单独设置flex项在容器里的布局位置.

align-self: auto | flex-start | flex-end | center | baseline | stretch;

提示:float,clear,vertical-align 这些属性,影响不了flex项的布局方式

本文属于吴统威的博客,微信公众号:bianchengderen 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=145 ,欢迎大家传播与分享.

时间: 12-01

CSS3中更灵活的布局方式的相关文章

安卓开发中我们常用的布局方式

在安卓开发中我们常用的布局方式有这么几种: 1.LinearLayout ( 线性布局 ) :(里面只可以有一个控件,并且不能设计这个控件的位置,控件会放到左上角) 线性布局分为水平线性和垂直线性二者的属性分别为: android:orientation= " horizontal " android:orientation= "vertical" . 2.RelativeLayout ( 相对布局 ) : (里面可以放多个控件,但是一行只能放一个控件) 附加几类

Java 理论与实践: JDK 5.0 中更灵活、更具可伸缩性的锁定机制--转载

多线程和并发性并不是什么新内容,但是 Java 语言设计中的创新之一就是,它是第一个直接把跨平台线程模型和正规的内存模型集成到语言中的主流语言.核心类库包含一个 Thread 类,可以用它来构建.启动和操纵线程,Java 语言包括了跨线程传达并发性约束的构造 ——synchronized 和 volatile .在简化与平台无关的并发类的开发的同时,它决没有使并发类的编写工作变得更繁琐,只是使它变得更容易了. synchronized 快速回顾 把代码块声明为 synchronized,有两个重

Css3中的响应式布局的应用

Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="stylesheet" type=&qu

CSS3中的Flexbox弹性布局(二)

flexbox详解 flexbox的出现是为了解决复杂的web布局,因为这种布局方式很灵活.容器的子元素可以任意方向进行排列.此属性目前处于非正式标准. flex布局模型不同于块和内联模型布局,块和内联模型的布局计算依赖于块和内联的流方向,而flex布局依赖于flex directions.简单的说:Flexbox是布局模块,而不是一个简单的属性,它包含父元素(flex container)和子元素(flex items)的属性. 属性解析 链接:https://cruxf.github.io/

css3中 弹性盒模型布局之box-flex

box-flex:也就是让子容器针对父容器的宽高属性按照一定的规则来划分 Eg: html代码: <div class="wrap"> <div class="box1">01</div> <div class="box2">02</div> <div class="box3">03</div> </div> CSS样式: <

css3中的多列布局columns详解

columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列的宽度:[ column-count ]:设置或检索对象的列数. css代码: body{font:14px/1.5 georgia,serif,sans-serif;} p{margin:0;padding:5px 10px;background:#eee;} h1{margin:10px 0;f

html5+css3中的background: -moz-linear-gradient 用法

在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linear-gradient(top,  #bccfe3 0%, #d2dded 100%);  适合 FF3.6+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bccfe3), color-stop(

html5+css3中的background: -moz-linear-gradient 用法 (转载)

转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linear-gradient(top,  #bccfe3 0%, #d2dded 100%);  适合 FF3.6+ background: -webkit- grad

百度在PWA中阐述的弹性布局-[CSS]

原文链接 响应式布局 自从进入移动互联网时代,响应式布局这个词经常出现在 Web 设计和开发领域,它让 Web 页面在不同尺寸的设备上都具有良好的浏览体验. 开始之前 在讲解响应式布局之前,需要先了解一下基础知识,只有对它们都有一定的了解,才能在做响应式布局时选取合适的技术方案. 像素 像素这个单位很常见,指的是图像中最小的单位,一个不可再分割的点,在计算机屏幕上一般指屏幕上的一个光点.例如常见的描述中 iPhone X 的分辨率是 1125x2436,一般指的是在长和宽上像素点的个数.但是在