.box{

display:flex;

}

.box {

display: inline-flex;

}

.box {

display:-webkit-flex;

display: flex;

}

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

属性名称

row

row-reverse

column

column-reverse

flex-direction 

主轴为水平方向,起点为左边

(默认值)

主轴为水平,起点在右端

colum,主轴为垂直方向,起点在上沿

主轴为垂直方向,起点在下沿

属性名称

nowrap

wrap

wrap-reverse

flex-wrap(是否转行)

nowrap(默认)

正常换行

从下往上换行

说明:flex-wrap为nowrap;屏幕宽度全屏时,假设box的子元素item的宽度width=100px,那么100px则是item的最大宽度。随着屏幕缩小,item的宽度width可以缩小, item的最小宽度为它的子元素的宽度。

flex-flow 是flex-direction和flex-wrap的简写形式

 

justify-content的属性 (水平方向的对齐)

属性值

含义

flex-start

左对齐

flex-end

右对齐

center

居中

space-between

两端对齐

space-around

每个项目两侧的间隔相等

 


 

align-content属性(垂直方向的对齐)

属性名称

含义

flex-start

与交叉轴的起点对齐

flex-end

与cross axis的终点对齐

center

与cross axis的中点对齐

space-between

与cross axis两端对齐,周线之间均匀分布

space-around

每根周线两侧的间隔都相等

stretch

main
axis占满整个cross axis

 

项目属性

order属性定义:项目的排列顺序,数值越小,排列月靠前,默认为0;

 

flex-grow
属性定义:

如果项目的flex-grow属性值都为1;则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2;其他项目都为1;则前者占据的剩余空间将比其他项目多一倍

 

flex-shrink
属性定义:

flex-shrink属性值都为1,则当空间不足,都将等比例缩小,如果一个项目的flex-shrink属性为0;其他项目都为1,则空间不足时候,前者不缩小,负值对该属性无效

 

flex-basis
属性定义:

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小

flex-basis:
350px 350px;

 

flex

         flex是flex-grow/flex-shrink/flex-basic的简写

 

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

flex box 布局的更多相关文章

  1. Flex box弹性布局 及 响应式前端设计的优化

    Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...

  2. Flex box 弹性盒子布局

    display: -webkit-flex 标识使用弹性布局 flex: num  占容器的比例   Flex等比划分 导航1 : Flex :1;  导航2  Flex: 2;     ————&g ...

  3. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  4. C-Flex 与 box布局教程

    http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html -阮一峰老师 http://www.w3cplus.com/css3/flexbox- ...

  5. 记一下flex弹性布局

    flex弹性布局也越来越广泛的在我们代码中出现了,更加方便我们的布局.自己用了查,查了用,有些还是记不住,俗话说好脑子不如烂笔头,原来都是写在本子上的,很不幸的一次次的想翻的时候总是找不到,还是写博客 ...

  6. CSS弹性盒模型(flex box)

    本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...

  7. CSS3 Flex Box(弹性盒子)

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

  8. flex图片布局

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>f ...

  9. flex弹性布局的基本介绍

    最近开始做元素排列比较复杂的项目,同时需要各种型号手机的适配,我发现以前所掌握的盒子模型.display.position.float等已经不能满足我的需求了, 于是开始着重学习flex弹性布局并运用 ...

随机推荐

  1. web 前端- 表格字段(文件大小)单位格式化算法

                     if (value === 0) return '0 B';   var k = 1024, // or 1000   sizes = ['B', 'KB', 'MB ...

  2. Android 图标尺寸与设计

    样例和图解 外框:整体大小 ↑ 边框:图标留白大小 ↓ 图标:外图标的大小 ↑ 阴影:阴影特效大小 ↓ 图形:内图标的大小 ↑ 可选视图权重:使用两种类型的图形尺寸可以达到统一的视觉权重(可选),   ...

  3. 【Alpha阶段】第四次Scrum例会

    会议信息 时间:2016.10.20 21:00 时长:20min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 个人任务报告 姓名 今日已完成Issue 明日计划Issue 今日已做事务 ...

  4. jquery学习笔记---jquery插件开发

    http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...

  5. 配置DNS

    1.将DNS解析服务器添加到:/etc/resolv.conf 2.打开DNS相关配置:sed -i 's/^hosts:[ \t]*files[ \t]*$/& dns/' /etc/nss ...

  6. VCL主要框架

    TObject ->TPersistent  Classes,抽象类 ->TComponent  Classes,抽象类 ->TControl  Controls ->TGra ...

  7. 分享一个关于jackson的Json工具类

    直接贴代码: import org.codehaus.jackson.map.DeserializationConfig.Feature; import org.codehaus.jackson.ma ...

  8. C#_StringBuilder分离字符串实例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Stri ...

  9. 详细说明手工创建oracle数据库实例

    手工建库比起使用DBCA建库来说,是比较麻烦的,但是如果我们学好了手工建库的话,就可以使我们更好地理解Oracle数据库的体系结构.手工建库须要经过几个步骤,每一个步骤都非常关键.它包括:1. 创建必 ...

  10. python selenium2 中的显示等待WebDriverWait与条件判断expected_conditions举例

    #coding=utf-8from selenium import webdriverfrom selenium.webdriver.common.by import Byfrom selenium. ...