1.启用Flexbox布局

在DIV上增加display:flex样式后，DIV即可做为一个Flexbox容器

2.容器内元素堆叠方向【flex-directio】

row 从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

3.水平方向的对齐【justify-content】

flex-start 靠左
center 居中
flex-end 靠右
space-around 分散对齐，但两边有空格
space-between 分散对齐，但两边没有空格

4.垂直方向的对齐－多行【align-content】

flex-start 靠上
center 居中
flex-end 靠下
space-around 分散对齐，但两边有空格
space-between 分散对齐，但两边没有空格

5.垂直方向的对齐－单行【align-items】

flex-start 靠上
center 居中
flex-end 靠下
stretch 拉伸高度以适应容器

7.容器内元素换行控制【flex-wrap】

wrap 必要时进行换行
nowrap 不换行，将子元素的宽度或高度缩小进行适应容器
wrap-reverse 必要时进行换行，但换行顺序是相反的

8.容器内元素的排序【order】

order的属性值为数字，默认为0，可以按属性值的数字大小改变容器内元素的默认显示顺序

9.容器内元素弹性增长/收缩速度【flex-grow】

增长：
flex-grow属性。值为数字，默认为0，元素宽度或高度在根据容器宽高增加时的增长速度按该属性的数字比例增长，类似到table中列宽度的百分比宽度

收缩：
flex-shrink属性。值为数字，默认为0，为0时表示不收缩。

初始长度：
flex-basis属性。值为像素，类似于width属性。

10.容器内元素对齐方式的覆盖【align-self】

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

CSS Flexbox布局相关推荐

设置子元素在主轴(横轴)方向上的对齐方式为容器的开头_今日推送 CSS Flexbox布局（上）...
在" Flexbox布局"模块之前,有四种布局模式: 四种布局模式: 块布局block,常见的就是div 内联inline,用于文本表table,用于二维表数据定位positi ...
css flexbox模型_Flexbox-Ultimate CSS Flex速查表（带有动画图！）
css flexbox模型 This comprehensive CSS flexbox cheatsheet will cover everything you need to know to st ...
我的第一个Chrome小插件-基于vue开发的flexbox布局CSS拷贝工具
概述之前介绍过移动Web开发基础-flex弹性布局(兼容写法) 里面有提到过想做一个Chrome插件,来生成flexbox布局的css代码直接拷贝出来用.最近把这个想法实现了,给大家分享下. pl ...
css之前端5种布局方式之table布局、float布局、absolute布局、flexbox布局、grid布局
1.表格布局(不推荐) 父级容器为display:table 表格子级容器为display:table-cell 一个单元格特点:在没有特别设置的情况下,子级是自动平分宽度并填满父级的. tabl ...
css中东布局rtl_如何将RTL支持添加到Flexbox和CSS网格
css中东布局rtl 逻辑属性定义了一种新方法,该方法改变了我们在CSS中使用布局的方式. 除其他优点外,它们还使我们能够基于逻辑属性(Flexbox和CSS网格)向布局添加RTL(从右到左)语言支持 ...
css flexbox模型_5分钟内学习CSS Flexbox-初学者教程
css flexbox模型快速介绍流行的布局模块 (A quick introduction to the popular layout module) In this post, you'll l ...
flexbox布局_这是您可以使用FlexBox制作的5种布局
flexbox布局 The CSS Flexible Box Layout - Flexbox - provides a simple solution to the design and layou ...
三分钟学会css3中的flexbox布局
2019独角兽企业重金招聘Python工程师标准>>> 这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念,通过学习flexbox布局,你会发现以往遇到的所有的关于布局 ...
CSS3 flexbox 布局 ---- flex项目属性介绍
CSS3 flexbox 布局 ---- flex项目属性介绍现在介绍用在flex项目上的css 属性,html结构还是用ul, li 结构,不过内容改成1,2,3, 样式的话,直接把给 ul 设d ...
带你入门 CSS Grid 布局
前言三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...

CSS Flexbox布局