CSS3 Flex布局 Flexbox的属性详解

原文：A Visual Guide to CSS3 Flexbox Properties

Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐、方向、顺序，甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。

很多的设计师和开发者发现Flex布局很容易使用，它定位元素简单因此很多复杂的布局能够用很少的代码实现，引领更简单的开发过程。Flex布局的算法是基于方向的，不同于基于水平或者垂直的block和inline布局，这种Flex布局可以被用在小的应用组件中，而CSS3 网格布局模型是新兴处理大规模的布局。

本文主要讲解flex的每个属性怎样栩栩如生的影响布局。

1、基本概念:

在开始描述Flexbox属性之前，我们先小小的介绍一下Flexbox模型，Flex布局由父容器称为Flex容器（flex-container）和它直接的子元素称为flex 项目（flex-item）构成，在下文中将它们简称为“容器”和“项目”。

在上图中你可以看到用来描述Flex容器和它的子元素的属性和术语，你可以阅读W3C的官方文档来了解他们的意思。

  • flex容器有两个参考的轴：水平的主轴（main axis）和交叉的轴（cross axis）。
  • 主轴的开始位置main start，主轴结束位置main end；
  • 交叉轴的开始位置叫做cross start，结束位置叫做cross end；
  • 直接子元素“项目”沿主轴排列；
  • 单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

Flexbox是2009年W3C提出的新布局方案，这里用的是2014年10月的最新标准，它的最新的浏览器支持情况

  • Chrome 29+
  • Firefox 28+
  • Internet Explorer 11+
  • Opera 17+
  • Safari 6.1+ (prefixed with -webkit-)
  • Android 4.4+
  • iOS 7.1+ (prefixed with -webkit-)

2、用法:

使用flex布局首先在HTML中的父元素上设置display属性：

.flex-container {
    display: -webkit-flex; /* Safari */
    display: flex;
}

或者你想让它像内联元素一样，可以这样写：

.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

注意：这是唯一的要设置在父容器上的属性，所有的直接子元素会成为自动flex项目。

3、flexbox 容器的属性：

flex-direction:row(默认值) | row-reverse | column | column-reverse;

该属性指定了Flex的项目怎样在flex容器中排列，设置flex容器的主轴方向，它们(项目)两个主要的方向排列，就像一行一样水平排列或者像一列一样垂直排列。

values：

.flex-container {
  -webkit-flex-direction: row; /* Safari */
  flex-direction:         row;
}

row 方向表明flex项目在一行中从左到右堆放在容器中。

.flex-container {
  -webkit-flex-direction: row-reverse; /* Safari */
  flex-direction:         row-reverse;
}

row-reverse 方向表明flex项目从右到左堆放。

.flex-container {
  -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
}

column 方向指明flex项目在一列中从顶部到底部堆放

.flex-container {
  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction:         column-reverse;
}

column-reverse 方向指明flex项目在一列中从底到顶部堆放

 flex-wrap:nowrap(默认值) | wrap | wrap-reverse;

初始情况下，Flexbox的理念是所有的项目都排列在一条线上（轴线），flex-wrap 属性控制容器是否将它的项目排列在一行或者多行，并且控制新行堆叠的方向。

values：

.flex-container {
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
}

flex项目会排列在一条线上并且它们会缩放适应到容器的宽。

.flex-container {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}

项目(flex items)会在多行展示，如果需要的话它们可以从左到右或者从上到下排列。

.flex-container {
  -webkit-flex-wrap: wrap-reverse; /* Safari */
  flex-wrap:         wrap-reverse;
}

 flex-flow: <flex-direction> || <flex-wrap>;

该属性是上面两个属性的简写方式，前一个参数设置flex-direction，后一个参数设置flex-wrap;

values：

.flex-container {
  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
  flex-flow:         <flex-direction> || <flex-wrap>;
}

默认值： row nowarp

 justify-content:flex-start(默认值) | flex-end | center | space-between | space-around;

定义了项目在容器主轴上的对齐方式，当的容器中项目都是一行并且非弹性的时候或者项目是弹性的但是达到了它们的最小宽度的时候该属性可以定义容器中的剩余空间的分配。

values：

.flex-container {
  -webkit-justify-content: flex-start; /* Safari */
          flex-start;
}

所有项目向容器的左边对齐

.flex-container {
  -webkit-justify-content: flex-end; /* Safari */
  justify-content:         flex-end;
}

所有项目向容器的右边对齐

.flex-container {
  -webkit-justify-content: center; /* Safari */
  justify-content:         center;
}

所有项目在容器中居中对齐

.flex-container {
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
}

第一个和最后一个项目向容器的边界对齐，剩余的空间各个项目等分

.flex-container {
  -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
}

所有的项目等分剩余的容器空间，包括第一个和最后一个项目（所以项目之间的间隔比第一个和最后一个项目与容器边框的间隔大一倍）。

 align-items:flex-start | flex-end | center | baseline | stretch(默认值);

定义项目在交叉轴上的对齐方式，交叉轴与当前的轴线有关系，与justify-content很相似，只不过是垂直方向的；这属性为所有的项目设置默认的交叉轴上的对齐方式，包括匿名的。

values：

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items:         stretch;
}

项目会填充容器的整个高或者宽(fill the whole height )，从容器交叉轴的起点到交叉轴的结束点。

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items:         flex-start;
}

项目会堆放在容器交叉轴的起始位置（cross start ）。

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items:         flex-end;
}

项目会堆放在容器交叉轴的结束位置（cross end ）。

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items:         center;
}

项目会堆放在容器交叉轴的居中位置（ center of the cross axis ）

.flex-container {
  -webkit-align-items: baseline; /* Safari */
  align-items:         baseline;
}

所有项目的基线会对齐

基线？不知道基线是什么请戳这里-->基线是什么?

 align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值);

当交叉轴上还有多余的空间时它定了多行的对齐方式，类似justify-content在主轴上对齐所有项目的方式一样。

values：

.flex-container {
  -webkit-align-content: stretch; /* Safari */
  align-content:         stretch;
}

每一行的项目后面等比分配了交叉轴上的多余空间。

.flex-container {
  -webkit-align-content: flex-start; /* Safari */
  align-content:         flex-start;
}

项目在容器的交叉轴起始点上堆放在一起。

.flex-container {
  -webkit-align-content: flex-end; /* Safari */
  align-content:         flex-end;
}

项目在容器的交叉轴结束点上堆放在一起。

.flex-container {
  -webkit-align-content: center; /* Safari */
  align-content:         center;
}

项目的行被堆放在容器的交叉轴线中间。

.flex-container {
  -webkit-align-content: space-between; /* Safari */
  align-content:         space-between;
}

与justify-content类似，项目的行距离在容器的交叉轴线上被等分，第一行和末尾的一行与容器的边缘对齐。

.flex-container {
  -webkit-align-content: space-around; /* Safari */
  align-content:         space-around;
}

与justify-content类似，项目的行等分了容器的交叉线上的剩余空间，第一行和最后一行同样也得到了一些，它们之间的间隔比首行和末行到容器边界的间隔大一倍。

注意：这个属性仅仅当容器中有多行的项目时有效，如果所有项目仅仅占一行，那这个属性对布局没有任何影响。

4、Flexbox 项目属性

<span style="font-size:14px; font-family: Arial, Helvetica, sans-serif;"> order: <integer></span>

order属性控制容器的直接子元素在容器中的顺序，默认在容器中这些项目是以该数字递增的方式排列的。

values:

values:
.flex-item {
  -webkit-order: <integer>; /* Safari */
  order:         <integer>;
}

该属性可以很简单的控制项目的顺序，而不用在HTML代码里面做调整。这个整形值可以为负数，默认值是 0。

<span style="font-size:14px;">flex-grow: <number></span>

该属性指定项目的生长因素，它确定了当容器有剩余空间分配的时候相对于其他的项目当前的项目能够增加多少宽度。

values:

.flex-item {
  -webkit-flex-grow: <number>; /* Safari */
  flex-grow:         <number>;
}

当所有的项目的flex-grow值相等的时候它们的size相同。

第二个项目占用了更多的剩余空间。

默认值是：0

注意：负数在这个属性中是没有用的

flex-shrink: <number>

该属性指定了项目的收缩因素，它确定了当容器还有剩余空间收缩的时候该项目相对于其他项目的收缩多少。

values:

.flex-item {
  -webkit-flex-shrink: <number>; /* Safari */
  flex-shrink:         <number>;
}

默认情况下，所有的项目都会收缩，但是当我们设置该属性的值为0的时候，项目会保持原有的大小。

默认值是：1

注意：负数在这个属性中是没有用的

flex-basis：auto | <width>

该属性的值和width和height的取值一样，在 flex factors分配剩余空间之前指定项目的初始的大小。

values:

.flex-item {
  -webkit-flex-basis: auto | <width>; /* Safari */
  flex-basis:         auto | <width>;
}

默认值：auto

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

该属性是flex-grow, flex-shrink 和flex-basis的缩写形式，同时属性值也有简写：auto表示(1,1,auto)，none表示(0,0,auto)

values:

.flex-item {
  -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

注意： W3C鼓励使用flex的简写形式，因为flex在使用过程中会顺便初正确的重新设置没有确定的组件到常见用法。

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

该属性和容器的align-items属性有同样的作用，它是用在单一的项目上的，可以完全压倒容器中align-items定义的对齐方式。

values:

.flex-item {
  -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
  align-self:         auto | flex-start | flex-end | center | baseline | stretch;
}

注意：auto 表示项目会使用父元素（容器）的align-items的值，如果该项目没有父元素的话align-self的值是stretch。

flex items值得注意的是：float、clear、vertical-align这些属性对于项目(flex item)会失效。

时间： 2024-11-05 11:29:01

CSS3 Flex布局 Flexbox的属性详解的相关文章

CSS3:Transition属性详解

Transition属性主要是用来对某个CSS属性的变化过程进行控制,官方的介绍是"CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.".而我个人则简单地理解为"在某个时间段内,平滑地改变某个CSS属性.". Transition又包含了四个子属性,分别为property.duration.timing-function.d

【CSS3 transform属性和过渡属性详解】

CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 2D Transform 方法 translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. rotate() 在一个给定度数顺时针旋转的元素.负值是允许的,这样是元素逆时针旋转. scale() 该元素增加或减少的大小,取决于宽度(X轴)和

css动画-animation各个属性详解（转）

CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①animation-name,②animation-duration,③animation-timing-function, 以下是各属性详解: 1.animation-name:指定要绑定到选择器的关键帧的名称. 2.animation-duration:定义动画完成一个周期需要多少秒或毫秒 3.a

EditText属性详解

关于EditText属性详解很详细的记录,转过来收着 1.EditText输入的文字为密码形式的设置 (1)通过.xml里设置: 把该EditText设为:android:password="true" // 以”.”形式显示文本 (2)在代码里设置: 通过设置EditText的setTransformationMethod()方法来实现隐藏密码或这显示密码. editText.setTransformationMethod(PasswordTransformationMethod.g

jQuery Event.which 属性详解

jQuery Event.which 属性详解 which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮. 对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮. which属性对DOM原生的event.keyCode和event.charCode进行了标准化. 适用的事件类型主要有键盘事件:keypress.keydown.keyup,以及鼠标事件:mouseup.mousedown. 该属性属于jQuery的Event对象(实例). 语法 jQuery 1.1.3 新增该

WPF依赖属性详解

WPF依赖属性详解 WPF 依赖属性 英文译为 Dependency Properties,是WPF引入的一种新类型的属性,在WPF中有着极为广泛的应用,在WPF中对于WPF Dependency Properties 的使用贯穿样式的使用,数据绑定,动画等等,在刚刚接触Dependency Properties的时候可能觉得有些奇怪,但是,当你了解他要解决的问题的时候,你可能就不觉得奇怪了.Dependency Properties第一个要解决的问题就是控件的属性共享问题,由于大部分的WPF控

Hibernate fetch属性详解

主要参考 :http://4045060.blog.51cto.com/4035060/1088025 一.hibernate抓取策略(单端代理的批量抓取fetch=select(默认)/join) 1)保持默认,同fetch="select" <many-to-one name="group" column="group_id" fetch="select" /> 另外发送一条select语句抓取当前对象关联实体

MWPhotoBrowser 属性详解 和代理解释

--------0.MWPhoto简单属性解释---------------- MWPhoto *photo = [MWPhoto photoWithURL:[NSURL URLWithString:@"http://farm4.static.flickr.com/3629/3339128908_7aecabc34b.jpg"]]; photo.caption = @"在将photo添加到数组中时,可以在这里设置标题名字"; photo = [MWPhotophot

转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解

目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全