参考:

来源: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. c#中冒泡排序算法描述

    int temp = 0; int b = 0; int[] arr = { 23, 44, 66, 76, 98, 11, 3, 99, 7 };# region该段与排序无关Console.Wri ...

  2. 使用springboot实现一个简单的restful crud——01、项目简介以及创建项目

    前言 之前一段时间学习了一些springboot的一些基础使用方法和敲了一些例子,是时候写一个简单的crud来将之前学的东西做一个整合了 -- 一个员工列表的增删改查. 使用 restful api ...

  3. MFC_选择目录对话框_选择文件对话框_指定目录遍历文件

    选择目录对话框 void C资源共享吧视频广告清理工具Dlg::OnBnClickedCls() { // 清空编辑框内容 m_Edit.SetWindowTextW(L""); ...

  4. live555的使用(转载)

    Live555 是一个为流媒体提供解决方案的跨平台的C++开源项目,它实现了对标准流媒体传输协议如RTP/RTCP.RTSP.SIP等的支持.Live555实现 了对多种音视频编码格式的音视频数据的流 ...

  5. MySQL Index--关联条件列索引缺失导致执行计划性能不佳

    某系统反馈慢SQL影响生产,查看SLOW LOG发现下面慢SQL: SELECT COUNT(DISTINCT m.batch_no) FROM ob_relation r INNER JOIN ob ...

  6. World发布博客测试

    姓名 地址 博客 www.bk.com  插入一个单元格并放入代码 using System; using System.Collections.Generic; using System.Linq; ...

  7. Flink使用(二)——Flink集群资源规划

    前言 本文主要译自Flink Forward 2017的柏林站中Robert Metzger的有关集群规划的How to size your flink cluster一文.该文中主要是考虑网络资源, ...

  8. node ffmpeg 视频操作

    1,先安装ffmpeg 2,设置环境变量 3,npm install fluent-ffmpeg 4,编码 var ffmpeg = require('fluent-ffmpeg'); //视频合并 ...

  9. java架构

    技术架构是以Spring Framework为核心容器,Spring MVC为模型视图控制器,MyBatis作为数据访问层, Apache Shiro为权限授权层,使用Ehcahe对常用数据进行缓存. ...

  10. 《少年先疯队》第八次团队作业:Alpha冲刺第三天

    前言   第三天冲刺会议    时间:2019.6.16   地点:宿舍 3.1 今日完成任务情况以及遇到的问题.   3.1.1今日完成任务情况 姚玉婷:酒店的会员信息的管理,如会员的添加,删除 马 ...