参考:

来源:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

网页布局是css的一个重点。

盒子模型

display属性
position属性
float属性

W3C提出了一种新的方案—-Flex布局

弹性布局

任何一个容器都可以指定为Flex布局

.box{
display: flex;
}

行内元素也可以使用Flex布局

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

设为Flex布局

子元素的float、clear和vertical-align属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction属性决定主轴的方向

.box {
flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap属性

默认情况下,项目都排在一条线

如果一条轴线排不下,就换行

.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(默认):不换行

wrap:换行,第一行在上方

wrap-reverse:换行,第一行在下方

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

默认值为row nowrap

.box {
flex-flow: <flex-direction> <flex-wrap>;
}

justify-content属性定义了项目在主轴上的对齐方式

.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items属性定义项目在交叉轴上如何对齐

.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用

.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

order
flex-grow
flex-shrink
flex-basis
flex
align-self

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

.item {
order: <integer>;
}

flex-grow属性定义项目的放大比例

默认为0,即如果存在剩余空间,也不放大

.item {
flex-grow: <number>; /* default 0 */
}

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小

.item {
flex-shrink: <number>; /* default 1 */
}


请点赞!因为你的鼓励是我写作的最大动力!

吹逼交流群:711613774

Day11:Flex布局的更多相关文章

  1. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  2. Flex 布局教程:实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  3. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  4. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  5. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  6. CSS之flex布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. flex布局示例

    来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...

  8. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  9. [flex布局]-flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...

随机推荐

  1. git重置账号密码

    1.打开控制面板(快捷打开win+R,输入control) 2.点击打开用户账户 3.点击凭据管理器 4.点击windows凭据删除你的git凭据即可

  2. java之struts2之异常处理

    1.在应用项目中,异常的出现时很正常的.而且项目上线后发生异常也很正常的.那么需要对这些异常有相应的处理机制,以便客户能够看你到更加友好的界面.Struts2中提供了异常处理机制. 2.Struts中 ...

  3. cesium 检测视图改变的代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. 【转载】 C#使用string.IsNullOrWhiteSpace方法判断字符串是否为非空字符

    在C#编程过程中,很多时候需要判断传入过来的字符串是否为Null或者空字符或者空白字符,此时就可以使用到string.IsNullOrWhiteSpace方法来判断,如果字符串为null或者空字符Em ...

  5. Xcodeproj相关以及删除 多层文件夹、库、资源逻辑

    一.介绍Xcodeproj是CocoaPods用ruby开发的一个插件库,可以用来新建.修改Xcode工程. 二.wiki和资源Xcodeproj wiki   :https://www.rubydo ...

  6. 【干货】小程序内嵌 H5 代码详解

    自从微信小程序发布了 web-view 组件,使得之前的 H5 网站移植到小程序成为可能.现在,很多项目在迁移的过程中遇到了许多问题,本文通过实例代码,为你讲解迁移过程中的几个典型场景. 1.小程序和 ...

  7. c#读写apk的 comment

    写入: ZipFile zipFile = new ZipFile("C:\\Users\\Administrator\\Desktop\\2.apk"); zipFile.Beg ...

  8. 某位前辈的Image识图,,有点意思,先留存

    import PIL from PIL import Image def get_bin_table(threshold=155): ''' 获取灰度转二值的映射table 0表示黑色,1表示白色 ' ...

  9. 【JUC】8.CopyOnWriteArrayList源码分析

    CopyOnWriteArrayList 解决脏读问题:牺牲写的效率,提高读的效率 CopyOnWriteArrayList是一种读写分离的思想体现的ArrayList: 它将读写的操作对象分离开来: ...

  10. javascript_17-基本类型和引用类型

    基本类型 直接存储值 Number . String .Boolean undefined.null 引用类型 存储引用 -Object.Array.Date.函数 包装基本类型--引用类型 func ...