CSS3 放飞自我2—

今天来谈论下弹性盒模型flex

.box{display:flex;}

行内元素使用flex

.box{display:inline-flex;
}

在这之前，先讲一下主轴和交叉轴。

主轴就是容器的X方向，交叉轴就是容器的Y方向。

容器的属性

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

flex-direction:主轴的方向

row:默认，主轴水平，从左往右。

row-reverse:主轴水平，从右往左。

column:主轴垂直，从上往下。

column-reverse:主轴垂直，从下往上。

flex-wrap:决定如何换行。

nowrap:默认，不换行。

wrap:换行，从上往下。

wrap-reverse:换行，从下往上。

flex-row:flex-direction+flex-wrap。

默认：flex-flow:row nowrap.

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

flex-start:默认，左对齐。

flex-end:右对齐。

center:居中。

space-between:两端对齐，项目之间的间隔都相等。

space-around:每个项目两侧的间隔相等。

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

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center:交叉轴的中点对齐。

baseline:项目的第一行文字的基线对齐。

stretch:默认值，如果项目未设置高度或是这城auto，将沾满整个容器的高度。

align-content:多行（多根主轴的）的情况下的对齐方式。如果只有一根轴线，则该属性不起作用。

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center:交叉轴的中点对齐。

stretch:默认值，轴线沾满整个交叉轴。

space-between:于交叉轴两端对齐，轴线之间的间隔平均分布。

space-around:每根轴线两侧的间隔都相等。

项目的属性

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

order:定义项目的排列顺序，数字越小越靠前。

flex-grow:定义项目的放大比例，默认为0，不放大。

flex-shrink:定义项目的缩小比例，默认为1，如果空间不足，项目将缩小。

flex-basis:定义了在分配多余的空间以前，项目占据的主轴空间。

flex:flex-grow+flex-shrink+flex-basis，默认0 1 auto

align-self:单个项目与其他项目不一样的对齐方式。约等于align-items。

转载于:https://www.cnblogs.com/littlesky123/p/6429849.html

CSS3 放飞自我2——flex布局相关推荐

CSS3 放飞自我1——margin,padding,border到底有啥关系？
在开始严肃地讨论技术之前,我想先说几句题外话.从今天开始呢,我将陆续更新一些有关于CSS3的一些我觉得很有必要了解的知识,也包括一些干货.这些东西不一定是难点,也不一定都是CSS3新出的,却是我觉得重 ...
浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念采用Fl ...
CSS3动画大全(附源码)flex布局,grid布局3d旋转,图像模糊,文字发光
CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! 文章目录 CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! html代码 css grid布局 flex布局文字发光 & 图 ...
CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
响应式布局：CSS3弹性盒flex布局模型
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و 页面布局一直都是web应用样式设计的重点我们传统的布局方式都是基于盒模型的利用display.position.float来 ...
详解 CSS3中最好用的布局方式——flex弹性布局（看完就会）
文章包含个人理解,错误请指出. 往期css3文章 CSS3基础属性大全 CSS3动画属性 animation详解(看完就会) CSS3 transform 2D转换之移动旋转缩放(详细讲解看完就会 ...
IE9兼容flex布局,以及CSS3
大家习惯上了flex布局,如果要兼容IE9,怎么办呢,先看看flex的兼容: 笔者从一位大佬偶然得知,一个兼容flex的方法,效果图如下: IE9能看到css3的效果,还有flex局部下面 demo ...
H5 携程app官网首页用flex布局+css3详细教程
效果图详细教程 1.搭建 H5携程移动端页面 (一) 2.flex布局 H5携程移动端头部搜索框 (二) 3.flex布局 H5携程移动端头部个人中心和图标 (三) 4.flex布局 H5携程移动端 ...
html flex布局水平居中,CSS3 Flexbox轻松实现元素的水平居中和垂直居中
网上有不少关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点,而Flex是刚出来不久的东西而已,为了方便说明,遇上新技 ...

CSS3 放飞自我2——flex布局

CSS3 放飞自我2——flex布局相关推荐

最新文章

热门文章