/*display:flex布局方式主要运用于垂直居中的效果*/

  一、Flex译为Flexible Box(弹性盒子),任何一个容器都可以指定为Flex布局

  注:设置为Flex布局之后,子元素的float,clear,vertical-align属性都失效

 .box1 {
display : flex
}
.box2 {
display : inline-flex
}
.box3 {
display : -webkit-flex;
display : flex
}

  二、基本

  1.采用Flex布局的元素,称为Flex容器(flex container),简称"container"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"item"。

  

  容器中默认存在两根轴:水平主轴(main axis)和垂直交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。子元素默认沿主轴排列。单个子元素占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

  三、容器属性

  1.flex-direction(主轴方向,即子元素排列方向)

    (1)row(默认) : 主轴为水平方向,起点在左边

    (2)row-reverse : 主轴为水平方向,起点在右边

    (3)column : 主轴为垂直放方向,起点在上边

    (4)column-reverse : 主轴为垂直方向,起点在下边

    (5)下图布局分别为 : column-reverse、column、row、row-reverse

//HTML代码

 <div class="box">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>

  //CSS代码  

 .box {
display : -webkit-flex;
disppaly : flex;
margin-top: 10px;
border:1px solid #333c44;
-ms-flex-direction: row | row-reverse | column | column-reverse;
-webkit-flex-direction: row | row-reverse | column | column-reverse;
flex-direction: row | row-reverse | column | column-reverse;
} .item {
width: 100px;
height: 100px;
background: #f0ad4e;
margin:10px;
}

  2.flex-wrap

  (1)nowrap(默认):item子元素不换行

  (2)wrap : item子元素换行,第一行在上边

  (3)wrap-reverse : item子元素换行,第一行在下边

//HTML代码

 <div class="wrap">
<div class="wrap-item">item1</div>
<div class="wrap-item">item2</div>
<div class="wrap-item">item3</div>
<div class="wrap-item">item4</div>
<div class="wrap-item">item5</div>
<div class="wrap-item">item6</div>
<div class="wrap-item">item7</div>
</div>

//CSS代码

 .wrap {
width: 300px;
border:1px solid #333c44;
display: flex;
display: -webkit-flex;
flex-wrap: wrap | nowrap | wrap-reverse;
}
.wrap-item {
width: 50px;
height: 50px;
background: #00a8f3;
margin: 10px;
}

  3.flex-flow  :< flex-direction> || <flex-wrap>, 两个属性的组合

//HTML代码

 <div class="flex-flow">
<div class="flex-flow-item">item01</div>
<div class="flex-flow-item">item02</div>
<div class="flex-flow-item">item03</div>
<div class="flex-flow-item">item04</div>
<div class="flex-flow-item">item05</div>
</div>

//CSS代码

 .flex-flow {
border:1px solid #333c44;
width:200px;
display: flex;
display: -webkit-flex;
flex-flow:row(row-reverse | column | column-reverse) nowrap(wrap | wrap-reverse); /*两两组合*/
}
.flex-flow-item {
width: 50px;
height: 50px;
background: darkkhaki;
margin:10px;
}

  4.justify-content  : flex-start | flex-end | center | space-between | space-around ,定义子元素项目在主轴水平方向上的对齐方式

    (1)flex-start : 左对齐

    (2)flex-end  : 右对齐

    (3)center  : 居中

    (4)space-between  : 两端对齐,子元素之间的距离相等

    (5)space-around : 每个子元素两侧的间隔相等

    

//HTML代码

 <div class="justify-content">
<div class="justify-item">item01</div>
<div class="justify-item">item02</div>
<div class="justify-item">item03</div>
<div class="justify-item">item04</div>
<div class="justify-item">item05</div>
</div>

//CSS代码

 .justify-content {
width: 800px;
border:1px solid #333c44;
display: -webkit-flex;
display: flex;
justify-content: flex-start | flex-end | center | space-between | space-around; /*默认为flex-start*/
}
.justify-item {
width: 50px;
height: 50px;
background: gold;
margin: 10px;
}

  5.align-items : flex-start | flex-end | center | baseline | stretch , 子元素在交叉轴(纵轴)方向上的对齐方式

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

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

    (3)center:交叉轴的中点对齐。

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

    (5)stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

    注 : 将子元素的高度设置不同时才能显示下图效果

    

  6.align-content  : flex-start | flex-end | center | space-between | space-around | stretch,设置多轴的对齐方式,如只有一根轴线则无效。
    (1)flex-start:交叉轴的起点对齐。

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

    (3)center:交叉轴的中点对齐。

    (4)space-between:与交叉轴两端对齐,轴线之间的间隔平均分布

    (5)space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

    (6)stretch(默认值):轴线占满整个交叉轴。

    

  四、子元素属性

  (1)order : 数值,子元素的排列顺序,值越小越靠前(左或上)

    

  (2)flex-grow : 定义子元素的占据比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

      

  (3)flex-shrink  : 定义子元素的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效

        

  (4)flex-basis :定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

        

  (5)flex : 复合属性(flex-grow | flex-shrink | flex-basis)组合

  (6)align-self : auto | flex-start | flex-end | center | baseline | stretch;

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

    该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

        

1.display:flex布局笔记的更多相关文章

  1. flex布局笔记整理

    flex布局笔记整理 了解-webkit-box 利用postcss进行css代码的向后兼容时,display:flex兼容后的代码常会带有display:-webkit-box. 部分移动端内核较低 ...

  2. display:flex 布局教程,弹性布局!

    display:flex 布局教程 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...

  3. display:flex布局

    /*背景 居中 自适应 铺满容器*/ background: center / cover; flex布局是什么? flex是Flexibe Box 的缩写,意思为”弹性布局”, 用来为盒子模型提供最 ...

  4. display: flex; 布局

    废话不多说,供上我学习Flex布局的启蒙文章,一切的答案,尽在这里,仔细阅读,多多回味!保证你有所收获! http://www.ruanyifeng.com/blog/2015/07/flex-gra ...

  5. HTML/CSS:display:flex 布局教程

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

  6. 【原创】display:flex布局大全

    全都是自己写的 希望大家可以点个赞 谢谢! Html代码(没时间精简 请多包涵) <!DOCTYPE html> <html lang="en"> < ...

  7. display:flex 布局详解(2)

    1.  flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现 HTML代码: <div class=" ...

  8. flex布局笔记

    flex布局: 容器: 容器主轴方向: 项目的主轴对齐方式: space-between:两端对齐,项目之间的间隔都相等. space-around:每个项目两侧的间隔相等.所以,项目之间的间隔比项目 ...

  9. display:flex 布局之 骰子

    代码部分 html <body> <div class="box"> <div class="a a1"> <span ...

随机推荐

  1. Redis的概念及与MySQL的区别

    学了MySQL相关知识后,了解到很多公司都会用mysql+redis互补使用的,今天学习整理一下Redis的相关知识. 首先是Redis和MySQL的区别: MySQL是典型的关系型数据库:Redis ...

  2. 关于Java的基础语法整理

  3. Exception 01 : org.hibernate.engine.jndi.JndiException: Error parsing JNDI name [foo]

    异常名称 org.hibernate.engine.jndi.JndiException: Error parsing JNDI name [foo] 异常截屏 异常详细信息 org.hibernat ...

  4. Linear transformations. 线性变换与矩阵的关系

    0.2.2 Linear transformations. Let U be an n-dimensional vector space and let V be an m-dimensional v ...

  5. Flash and Scalform CLIK

    Flash shift + f7 打开组件检查面板 Scaleform As bit define bool                Unrolling       :1;    // indi ...

  6. iOS开发使用pdf切图

    把pdf资源拖到Assets.xcassets里面, 打开最右边的按钮, scales选择single scale就可以像以前一样使用了:  [UIImage imageName:@"xxx ...

  7. webstorm背景颜色更改

    一.file --> settings 二.editor-->color scheme  然后右边下拉选择 三.apply -- > ok

  8. Ubuntu 下Anaconda3出现 conda:command not found(未找到命令)

    问题:anaconda: command not found解决方案:打开Terminal 1.使用命令:sudo apt install vim 安装vim文本编辑器2.使用命令:vim ~/.ba ...

  9. codechef Sum of Cubes 图论

    正解:图论+数学 解题报告: 先放个传送门QwQ 然后放下题目大意?就说给定简单图,无自环或重边,然后求(∑e[i][j])k,i,j∈S,S为点集的子集 然后因为k的取值只有[1,3],所以这里分类 ...

  10. 微信小程序可以转发给微信好友了

    微信小程序又放大招了:小程序页面可以放置转发按钮,分享更流畅.同时开放了微信运动步数.背景音乐播放等更多基础能力.小程序可以在自己的页面上放置转发按钮,用户点击后,即可将喜欢的内容分享给好友或群聊,体 ...