安科网

CSS魔法堂：Flex布局

尚衍亮

尚衍亮

2019-06-27

关注 关注

前言

 Flex是Flexible Box的缩写，就是「弹性布局」。从2012年已经面世，但由于工作环境的原因一直没有详细了解。最近工作忙到头晕脑胀，是要学点新东西刺激一下大脑，打打鸡血。

Flex就这么简单

浏览器兼容性

 一说到兼容性就是永远的痛，不过幸运的是只要在IE10加-ms-前缀就可以用啦^_^

涉及的对象

CSS魔法堂：Flex布局

 Flex布局主要是操作Flex Container 和 Flex Item两类对象。

Flex Container为作为布局容器拥有main axis，main start，main end，cross axis，cross start 和 cross end属性。

  1. main axis为主轴，默认是水平方向；
  2. main start为主轴起始位置，默认是主轴和左侧边框的交叉点(Flex Item会从main start和cross start开始排列)；
  3. main end为主轴结束位置，默认是主轴和右侧边框的交叉点；
  4. cross axis为交叉轴，默认是垂直方向；
  5. cross start为交叉轴起始位置，默认是交叉轴和上边框的交叉点；
  6. cross end为交叉轴结束位置，默认是交叉轴和下边框的交叉点。

Flex Item则为容器内的孩子元素，拥有main size和cross size属性。

  1. main size为Flex Item的主轴方向宽度；
  2. cross size为Flex Item的交叉轴方向宽度。

玩转Flex Container

/* 设置Flex Container，为其直接孩子节点创建Flex Context */
display: flex;        /* 定义块级Flex Contianer */
display: inline-flex; /* 定义行级Flex Contianer */
/* 设置main/cross axis方向和main/cross start, main/cross end的位置
 * row - 默认值，main axis为水平，main start为主轴和左侧边框的交叉点，main end为主轴和右侧边框的交叉点
 *               cross axis为垂直，cross start为交叉轴和上边框的交叉点，cross end为交叉轴和下边框的交叉点
 * row-reverse - main axis为水平，main start为主轴和右侧边框的交叉点，main end为主轴和左侧边框的交叉点
 *               cross axis为垂直，cross start为交叉轴和上边框的交叉点，cross end为交叉轴和下边框的交叉点
 * column - main axis为垂直，main start为主轴和上边框的交叉点，main end为主轴和下边框的交叉点
 *          cross axis为水平，cross start为交叉轴和左侧边框的交叉点，cross end为交叉轴和右侧边框的交叉点
 * column-reverse - main axis为垂直，main start为主轴和下边框的交叉点，main end为主轴和上边框的交叉点
 *                  cross axis为水平，cross start为交叉轴和左侧边框的交叉点，cross end为交叉轴和右侧边框的交叉点
 */
flex-direction: row | row-reverse | column | column-reverse
/* 是否换行
 * nowrap - 默认值，打死都不换行
 * wrap - 乖乖换行，第一行到最后一行的方向为从 cross start 到 cross end
 * wrap-reverse - 乖乖换行，但第一行到最后一行的方向为从 cross end 到 cross start
 */
flex-wrap: nowrap | wrap | wrap-reverse

CSS魔法堂：Flex布局

/* 一次搞定flex-direction 和 flex-wrap设置
 */
flex-flow: <flex-direction> || <flex-wrap>
/* 设置main axis方向的对齐方式
 * flex-start - 默认值，向main start对齐
 * flex-end - 向main end对齐
 * center - 居中
 * space-between - 若有多余空间，则平均分配到各Flex Item之间
 * space-around - 若有多余空间，则平均分配到各Flex Item两边
 * space-evenly - 若有多余空间，按"多余空间/(FlexItem数+1)"计算得到空间宽度，然后分配到各Flex Item两边
 */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

CSS魔法堂：Flex布局

/* 设置cross axis方向的对齐方式
 * stretch - 默认值，当height为auto时，Flex Item被拉伸沾满cross axis的空间；否则无效果。
 * flex-start - 向cross start对齐
 * flex-end - 向cross end对齐
 * center - 居中
 * baseline - 对齐Flex Container的baseline
 */
align-items: flex-start | flex-end | center | stretch | baseline
/* 设置cross axis出现多行时，cross axis方向的对齐方式。当仅有一行时，无效果。
 * stretch - 默认值，当height为auto时，Flex Item被拉伸沾满cross axis的空间；否则无效果。
 * flex-start - 向cross start对齐
 * flex-end - 向cross end对齐
 * center - 居中
 * space-between - 若有多余空间，则平均分配到各Flex Item之间
 * space-round - 若有多余空间，则平均分配到各Flex Item两边 
 */
align-content: flex-start | flex-end | center | stretch | space-between | space-around

玩转Flex Item

注意：Flex Item的float,clear和vertical-align均无效。

/* 设置显示顺序
 * 默认值为0，根据元素在DOM树的位置决定显示的顺序
 */
order: <integer>
/* 设置当main axis方向存在多余空间时，元素拉伸所占的比例。
 * 例如#div1[style="flex-grow:1"]和#div2[style="flex-grow:3"]，现在多余空间为400px，那么div1占400*1/(1+3)，而div2占400*3/(1+3)。
 * 默认值为0，即元素不拉伸
 */
flex-grow: <number>
/* 设置当main axis方向存在空间不足且flex-wrap:nowrap时，元素的缩放比例。
 * 默认值为1
 */
flex-shrink: <number>
/* 设置元素的默认宽度，当设置为0时flex-grow无效
 * 默认值为auto
 */
flex-basis: auto | <length>
/* 一次搞定flex-grow、 flex-shrink和flex-basis
 * 默认值0 1 auto，关键值none 为 0 0 auto，关键值auto为 1 1 auto。
 */
flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]
/* 设置cross axis方向的对齐方式
 * stretch - 默认值，当height为auto时，Flex Item被拉伸沾满cross axis的空间；否则无效果。
 * flex-start - 向cross start对齐
 * flex-end - 向cross end对齐
 * center - 居中
 * baseline - 对齐Flex Container的baseline
 */
align-self: auto | flex-start | flex-end | center | baseline | stretch

应用

 通过Flex Layout我们可以轻松实现过去不好实现的效果

色子

CSS魔法堂：Flex布局

<div class="box box1">
  <span class="dot"></span>
</div>
<div class="box box2">
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div class="box box3">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
<div class="box box4">
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>
<div class="box box5">
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <span class="dot"></span>
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>
<div class="box box6">
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>
.box{
    vertical-align: top;
    margin: 10px;
    padding: 10px;
    width: 100px;
    height: 100px;
    background: #ccc;
    border-radius: 10%;
    box-shadow: 0 5px 1px #fff inset
        , 0 -5px 1px #888 inset
        , 5px 0 1px #aaa inset
        , -5px 0 1px #aaa inset;
    display: inline-flex;
    flex-flow: row wrap;
}
.dot{
    width:30px;
  height:30px;
    background: #222;
    border-radius:50%;
    box-shadow: 1px 4px 1px #000 inset
        , -1px -3px 3px #444 inset;
}

.box1{
    justify-content: center;
    align-items: center;
}
.box2{
    justify-content: space-between;
}
.box2 > .dot:last-child{
    align-self: flex-end;
}
.box3{
    justify-content: space-between;
}
.box3 > .dot:nth-of-type(2){
    align-self: center;
}
.box3 > .dot:last-child{
    align-self: flex-end;
}

.box4{
      flex-flow: column;
        justify-content: space-between;
}
.column{
    display: flex;
    justify-content: space-between;
}

.box5{
      flex-flow: column;
        justify-content: space-between;
}
.box5 > .dot{
    align-self: center;
}

.box6{
      flex-flow: row;
        justify-content: space-between;
}
.box6 > .column{
  flex-flow: column;
}

圣杯布局

CSS魔法堂：Flex布局

<body class="container">
  <header>#header</header>
  <main>#main</main>
  <aside class="left-aside">#aside1</aside>
  <aside class="right-aside">#aside2</aside>
  <footer>#footer</footer>
</body>
body{
    margin:0;
    font-style: italic;
    font-family: sans;
}

/* Holy Grail Layout */
.container{
    display: flex;
    flex-direction: column;
}

@media all and (min-width: 600px){
    .container{
        flex-flow: row wrap;
    }
    header,footer{
        flex: 0 0 100%;
    }
    header{
        order: 0;
    }
    footer{
        order: 4;
    }
    .left-aside{
        order: 1;
    }
    .right-aside{
        order: 3;
    }
    .left-aside,.right-aside{
        flex: 0 0 10em;
    }
    main{
        order: 2;
        flex: 1;
    }
}

/* User Defined Style*/
.container > *{
    text-align: center;
}
main{
    background: #ccc;
    line-height: 6;
}
.left-aside{
    background: skyblue;
    line-height: 4;
}
.right-aside{
    background: tomato;
    line-height: 4;
}
header,footer{
    background: #666;
    line-height: 3;
}

栅格系统

CSS魔法堂：Flex布局

<div class="grid">
  <div class="row">
    <div class="col col-5">
      <div>5/10</div>
    </div>
    <div class="col col-4">
      <div>4/10</div>
    </div>
    <div class="col col-1">
      <div>1/10</div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col">
    <div>
      auto
    </div>
  </div>
  <div class="col col-3">
    <div>
      3/10
    </div>
  </div>
</div>
/* Mobile First Grid System */
.grid{
    display: flex;
    flex-flow: row wrap;
}
.row{
    flex:0 0 100%;
    display:flex;
    flex-flow: row wrap;
}
.col{
    box-sizing: border-box;
    padding: 5px;
    flex: 0 0 100%;
}
@media all and (min-width:600px){
.col{
    flex: 1;
}
.col-10{flex:0 0 100%;}
.col-9{flex:0 0 90%;}
.col-8{flex:0 0 80%;}
.col-7{flex:0 0 70%;}
.col-6{flex:0 0 60%;}
.col-5{flex:0 0 50%;}
.col-4{flex:0 0 40%;}
.col-3{flex:0 0 30%;}
.col-2{flex:0 0 20%;}
.col-1{flex:0 0 10%;}
}

/* User Defined Style*/
.col>div{
    text-align: center;
    background: #bbb;
    line-height: 2.5;
    height: 100%;
    font-family: sans;
}

带附加项的表单控件

CSS魔法堂：Flex布局

<div class="form-input">
  <i class="form-addon">Amount</i>
  <input class="form-control">
  <i class="form-addon form-addon-after">Encrypt</i>
</div>
.form-input{
    display: inline-flex;
    line-height: 2;
    border: solid 1px rgba(0,0,0,0.3);
}
.form-input:hover{
        border: solid 1px rgba(0,0,0,0.4);
}
.form-addon{
    font-style: normal;
    color: #666;
    background: #ddd;
    padding-left: 10px;
    padding-right: 10px;
    border-right: solid 1px rgba(0,0,0,0.3);
}
.form-addon-after{
    border-left: solid 1px rgba(0,0,0,0.3);
    border-right: none 0;
}
.form-control{
    border:none 0;
    outline-color: transparent;
    padding: 5px;
    caret-color: #888;
    font-size: 16px;
}

总结

尊重原创，转载请注明转自：https://www.cnblogs.com/fsjoh... ^_^肥仔John

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

axis flex布局 交叉轴 css

尚衍亮

尚衍亮

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

pandas 的DataFrame.apply()

pandas的apply函数是自动根据function遍历每一个数据，然后返回一个数据结构为Series的结果

mmmjyjy 2020-07-16

python—机器学习合并数据

import numpy as npa = np.arange.reshape(2,3)b = np.random.randint#concatenate 沿着指定axis进行数组合并 0为行，1为列，默认为0#np.vstack或者np.row_stac

千锋 2020-07-04

pandas的基本使用

# 两个数据类型：Series = 索引+一维数据、DataFrame = 行列索引+二维数据。Series类型：一组数据及与之相关的数据索引组成。# pd.Series # index自定义索引。DataFrame类型：表格型的数据类型，由共用相同索引的

jzlixiao 2020-05-04

WebService实现包--AXIS2

Axis2是全新设计的，在2004年的“Axis峰会”上，大家决定采用新的架构来让Axis更加的富有弹性，更有效率，并且更加的可配置。Axis2现在具有的一些feature:. 　　第一步：下载AXIS2。很有趣，在apache的Web Service 的

babycrying 2009-12-11

pandas

# 切片，可数字切片或者index切片。# bool值,可列表或者矩阵，如果是列表则根据行来显示，如果是矩阵则返回矩阵，false值则是NaN. # append，将其他行附加到调用方的末尾，并返回一个新对象。

zhangxiaojiakele 2020-01-07

Python之对DataFrame的多列数据运用apply函数操作

axis=1代表，对纵轴数据进行相关操作，即列。

举 2020-01-06

tensorflow的reduce_sum方法学习记录

在使用tensorflow时，经常会用到reduce_sum这个函数，表示对数据进行求和，但它的参数的作用却不是那么容易明白。对于二维的input_tensor张量，0表示按列求和，1表示按行求和，[0, 1]表示先按列求和再按行求和。默认值为Flase，

lybbb 2019-12-25

springboot集成axis1.4

* Licensed under the Apache License, Version 2.0 ;* you may not use this file except in compliance with the License.* Unless req

newfarhui 2019-12-12

pandas中的axis参数（看其他人的博客中产生的疑问点，用自己的话解析出来）

下面这张图，在很多资料中都看到了，我只能说先死记住 axis=0,代表跨行，axis=1,代表跨列。我的理解是每行取一个值，组成了一列，所以这里sum()就是获取一列数据的和。drop,传入的参数是指定了某一行index,axios=0也是指跨行，所以说就

jiahaohappy 2019-12-04

python 检查数据中是否有缺失值,删除缺失值的方式

通常情况下删除行，使用参数axis = 0，删除列的参数axis = 1,通常不会这么做，那样会删除一个变量。

BETTINA 2019-12-02

SpringBoot 使用Axis集成WebService

在上一章我介绍了SpringBoot使用CXF集成WebService《SpringBoot 使用CXF 集成WebService》，想了解的可以回顾下。本章我们来一起研究下如何集成Axis,这个相比较CXF集成就复杂了些。我这项目是使用gradle构建的

jianghuchuanke 2019-11-03

python数据分析pandas中的DataFrame数据清洗

总结下来为4步： 一.使用isnull或notnull筛选：df.isnull().any 二.使用loc取出具体数据：df.loc[df.isnull().any] 三：取出这些数据的索引：df.loc[df.isnull().any]

morexyoung 2019-11-01

Axis，axis2，Xfire以及cxf对比

xfire最新的版本为1.2.6 - May 3, 2007 网站已经说了“XFire is now CXF” --|||. cxf最新的版本为Feb 28, 2011 - Apache CXF 2.3.3 is released!现在只有axis2和cx

Selier 2014-05-28

用JavaScript实现使用鼠标画线的示例代码

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。用JavaScript实现用

javaer 2016-12-06

python实现nao机器人手臂动作控制

代码依然很简单，但是为什么我要写博客呢？这其中有很大的原因在于，代码是死的，可是读着读着就感觉代码活了，而且，每次读都会有不同的感受。咱就直接看正题吧。#we use the body name to signify the collection of a

kx0 2019-04-29

Axis

xfire最新的版本为1.2.6-May3,2007网站已经说了“XFireisnowCXF”--|||. 现在只有axis2和cxf官方有更新。XFire是与Axis2并列的新一代WebService平台。XFire采用Woodstox作Stax实现；在

xiajlxiajl 2015-09-01

java调用WebService接口方法

//这里注意有方法名，已经引用的地址。

bxqybxqy 2015-05-06

Axis2 1.6.2 实践示例

首先需要下载axis2的相关jar包，到axis的官方网站即可获得开发的依赖包。然后你需要下载官方提供的axis的eclipse插件工具，可以帮助我们打包及其生产客户端调用代码。这个war是axis2的接口管理系统，可以在线增加、查询接口。可以作为一个we

xiajlxiajl 2013-01-25

本地仓库安装已有JAR包

mvninstall:install-file-Dfile="F:\工作软件\axis-1.4.jar"-DgroupId="org.apache.axis"-DartifactId="axis"

82580194 2015-06-13

axis2创建,部署,发布和访问web service

使用axis2创建web service是一种常用的发布web服务的方式，下面从搭建axis2开发环境开始，写一个简单的web服务，然后再写一个客户端程序，访问我们刚才创建的WEB 服务。运行CMD，切换目录到解压包的webapp目录下，该目录下有一个bu

Junzizhiai 2012-01-13
尚衍亮

尚衍亮

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号