弹性布局----Flex

1.背景

  传统的布局方案基于盒状模型,依赖display + position + float 的方式实现,灵活性较差,对于那些特殊的布局非常不方便.

  2009年,W3C提出了一种新的方案--Flex布局.

2.什么是Flex布局?

  Flex是Flexible Box的缩写,意为"弹性布局",用来为盒模型提供最大的灵活性,以便我们能够简便、完整、响应式的实现多种网页布局.

  任何一个容器都可以指定为Flex布局,行内元素也可以设置为Flex布局

 

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

 

  

  .box {display: flex;    /*行内元素设置为 inline-flex*/}.box .item {width: 100px;height: 100px;background-color: red;margin-left: 10px;}

  注意,设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

3.基本概念

 

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

  容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

  Flex项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

  Flex属性分为两部分,一部分作用于容器称容器属性,另一部分作用于项目称为项目属性。下面我们就分别来介绍它们。

4.Flex容器的属性

4.1 flex-direction属性

 

flex-direction属性决定主轴的方向(即项目排列的方向)

基本语法:

.box {flex-direction: row | row-reverse | column | column-reverse;
}

说明:

   (1)row表示从左向右排列

 (2)row-reverse表示从右向左排列

  (3)column表示从上向下排列

  (4)column-reverse表示从下向上排列

4.2 flex-warp属性

默认情况下,Flex项目都排在一条轴线上.我们可以通过对flix-warp的属性的设置,让Flex项目是否换行

基本语法:

.box {flex-wrap: nowrap | wrap | wrap-reverse;
}

说明:

(1)nowrap:所有项目单行排列

(2)warp:所有项目多行排列,按照从上到下的顺序

 

(3)warp-reverse:所有项目多行排列,按照从上到下的顺序

4.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,用来设置项目的排列方式。默认值为row nowrap

基本语法:

.box {flex-flow: <flex-direction> || <flex-wrap>;
}

例如我给容器设置 flex-flow: row wrap-reverse;就是主轴从左向右,从下到上多行排列

4.4 justify-content

  justify-content属性定义了项目在主轴上的对齐方式及额外空间的分配方式。

 基本语法:

.box {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:项目两侧的间隔相等,项目之间的距离是两侧距离的2倍

 

 

  (6)space-evenly:项目均匀分布

 

4.5 align-items

  align-items属性定义项目在交叉轴上的对齐方式。

基本语法:

.box {align-items: stretch | flex-start | flex-end | center | baseline;
}

说明:

(1)stretch:交叉轴方向拉伸显示

 

(2)flex-start:项目按交叉轴起点线对齐

 

(3)flex-end:项目按交叉轴终点线对齐

(4)center:交叉轴方向项目中间对齐

 

(5)baseline:交叉轴方向按第一行文字基线对齐

4.6 align-content

  align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

基本语法:

.box {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:轴线占满整个交叉轴。

 

 

 

5.Flex项目属性

5.1 order

     默认情况下,Flex项目是按照在代码中出现的先后顺序排列的。然而order属性可以控制项目在容器中的先后顺序。

基本语法:

.item {order: <integer>;
}

假如有四个盒子按照1,2,3,4排列,我想让2号盒子排在第一位,那么就把2号盒子的order的值写成最小即可,order可以设置负值

 

 

5.2 flex-grow

 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

 基本语法:

.item {flex-grow: <number>; /* default 0 */
}

   如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)

  如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

 

 

 

5.3 flex-shrink

  flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

基本语法:

.item {flex-shrink: <number>; /* default 1 */
}

  如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

  负值对该属性无效

 

5.4 flex-basis

   flex-basis属性定义项目在分配额外空间之前的默认尺寸。属性值可以是长度(20%,10rem等)或者关键字auto。它的默认值为auto,即项目的本来大小。

基本语法:

.item {flex-basis: <length> | auto; /* 默认 auto */
}

说明:

(1) flex-basis:auto

(2)flex-basis:3em

(3) flex-basis:30%

 

 

5.5 flex

  flex属性是flex-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

基本语法:

 

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

 

 

 

5.6 align-self

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

基本语法:

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

 

6.Flex实例

6.1 网格布局

  (1) 最简单的网格布局,就是平均分布。在容器里面平均分配空间,需要设置项目的自动缩放。

 

html代码:

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

css代码:

.box {display: flex;width: 550px;
}
.box .item {flex: 1;background-color: red;margin-right: 10px;border-radius: 5px;font-size: 20px;text-align: center;
}

 (2) 百分比布局

  设置某个网格的宽度为固定百分比,其它网格平均分配剩余的空间

html代码

    <div class="box14"><span class="item14">1/2</span><span class="item14">1/4</span><span class="item14">auto</span><span class="item14">auto</span></div>

css代码

.box14 {display: flex;width: 550px;margin-bottom: 10px;
}
.box14 .item14 {flex: 1;background-color: red;margin-right: 10px;border-radius: 5px;font-size: 20px;text-align: center;
}
.box14 .item14:first-child {flex: 0 0 50%;
}
.box14 .item14:nth-child(2){flex: 0 0 25%;
}

6.2 圣杯布局

  圣杯布局指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。 

 

html代码:

    <div class="box15"><header>header</header><div class="connent"><div class="main">main</div><div class="left">left</div><div class="right">right</div></div><footer>footer</footer></div>

  *最外层盒子应该是body标签,为了演示画了一个600*600的盒子

css代码:

.box15 {width: 600px;height: 600px;font-size: 30px;color: #fff;text-align: center;display: flex;flex-direction: column;
}
.box15 header,.box15 footer {height: 50px;background-color: red;
}
.box15 .connent {display: flex;flex: 1;
}
.box15 .connent .main {flex: 0 0 400px;background-color: pink;
}
.box15 .connent .left, .box15 .connent .right{flex: 0 0 100px;background-color: #ccc;
}
.box15 .connent .left {order: -1;
}

6.3 筛子的布局

(1)

 

html代码:

    <div class="box16"><span class="item"></span></div>

css代码:

.box16 {width: 100px;height: 100px;background-color: #ccc;border-radius: 5px;display: flex;justify-content: center;align-items: center;
}
.box16 .item {width: 15px;height: 15px;background-color: #000;border-radius: 50%;
}

(2)

html代码:

<div class="box17"><span class="item"></span><span class="item"></span><span class="item"></span>
</div>

 

css代码:

 
.box17 {width: 100px;height: 100px;background-color: #ccc;border-radius: 5px;display: flex;
}
.box17 .item {width: 15px;height: 15px;background-color: #000;border-radius: 50%;
}
.box17 .item:nth-child(2) {align-self: center;
}
.box17 .item:nth-child(3) {align-self: flex-end;
}

6.4 九宫格效果


html代码:

    <div class="box18"><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span></div>

css代码

.box18 {width: 350px;display: flex;flex-wrap: wrap
}
.box18 .item {width: 100px;height: 100px;background-color: red;margin: 5px 5px;
}

6.5 条件搜索

  像是一些后台OA可能用到很多条件查询并列在一起,如果布局的整齐些,可以用Flex布局

html代码:

<div class="box19"><div class="search"><span>条件一</span><select><option value="1">请选择</option><option value="1">111</option><option value="2">222</option><option value="3">333</option></select></div><div class="search"><span>条件二</span><select><option value="1">请选择</option><option value="1">111</option><option value="2">222</option><option value="3">333</option></select></div>..............</div>

css代码:

.box19 {display: flex;flex-wrap: wrap;
}
.box19 .search {width: 150px;display: flex;margin: 5px 20px 0 0;
}
.box19 .search span {font-size: 14px;color: #000;margin-right: 5px;
}
.box19 .search select {flex-grow: 1
}

 

 

以上所有的案例都放在了我的github中,克隆地址 

转载于:https://www.cnblogs.com/qisi007/p/9640287.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/266004.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Lab 6:uC/OS II

为什么80%的码农都做不了架构师&#xff1f;>>> 目标&#xff1a; 移植uC/OS II到RPi上&#xff0c;实现两个任务的调度。这两个任务能轮流点亮LED&#xff0c;并通过串口发送消息表明自己正在运行 具体步骤&#xff1a; 助教给的代码已经很完整了&#xff0c;…

安卓APP_ 布局(7) —— ViewPager翻页

摘自&#xff1a;安卓APP_ 布局&#xff08;7) —— ViewPager翻页 作者&#xff1a;丶PURSUING 发布时间&#xff1a; 2021-04-14 19:37:18 网址&#xff1a;https://blog.csdn.net/weixin_44742824/article/details/115705471 ViewPager 实现效果一睹为快&#xff08;1&#…

15个实用的grep示例

2019独角兽企业重金招聘Python工程师标准>>> 首先&#xff0c;新建如下文件demo_file THIS LINE IS THE 1ST UPPER CASE LINE IN THIS FILE. this line is the 1st lower case line in this file. This Line Has All Its First Character Of The Word With Upper C…

IntelliJ IDEA 连接数据库 详细过程

IntelliJ IDEA集成了众多插件&#xff0c;方便开发者使用&#xff0c;使用其自带的Database模块就可以很方便的配置、连接到数据库&#xff0c;本次操作以MySQL为例&#xff0c;其中testjdbc数据库已经提前建好&#xff0c;里面有两张表emp_table 和 t_user&#xff0c;相关信息…

Linux线程编程

参考&#xff1a;Linux多线程编程初探 作者&#xff1a;峰子_仰望阳光 网址&#xff1a;https://www.cnblogs.com/xiehongfeng100/p/4620852.html 目录线程概述线程概念线程与进程区别为何用线程线程开发api概要线程创建、等待、退出线程创建线程退出线程等待线程ID获取及比较线…

Controlling Execution

2019独角兽企业重金招聘Python工程师标准>>> 逗号操作符 逗号操作符在java中特殊之处在于两个地方&#xff1a; 1. 定义同种类型的变量时可以这样写&#xff1a; int i10,j20;//只有同种变量才行 2. 在for循环中的初始化条件和变化的步骤中对于同种类型的可以连接…

前端 js 非控件 使用标签打印机 打印二维码和文本_青岛Web前端(HTML5)面试题分享...

HTML5是前端开发人员必须掌握的技能之一&#xff0c;那么在面试时&#xff0c;面试官常问到的HTML5的问题有哪些呢&#xff1f;青岛HTML51、Doctype作用&#xff1f;严格模式与混杂模式如何区分&#xff1f;它们有何意义&#xff1f;答&#xff1a;告知浏览器的解析器&#xff…

SpringBoot整合SpringBatch实用简例

SpringBatch主要是一个轻量级的大数据量的并行处理(批处理)的框架。 作用和Hadoop很相似&#xff0c;不过Hadoop是基于重量级的分布式环境(处理巨量数据)&#xff0c;而SpringBatch是基于轻量的应用框架(处理中小数据)。 这里使用SpringBatch做了一个能跑的最简单例子&#xff…

安卓APP_ Fragment(1)—— Fragment概念、基础用法、动态变换、管理栈

摘自&#xff1a;安卓APP_ Fragment&#xff08;1&#xff09;—— Fragment概念、基础用法、动态变换、管理栈 作者&#xff1a;丶PURSUING 发布时间&#xff1a; 2021-04-15 23:32:31 网址&#xff1a;https://blog.csdn.net/weixin_44742824/article/details/115716359 目录…

谷歌五笔输入法电脑版_“五笔输入法”打字速度更快,为什么却没啥人用?

现如今&#xff0c;随着国内经济水平的不断发展&#xff0c;电脑和手机都已经不再是稀罕玩意&#xff0c;因为现在国内有很多的厂家都在生产手机和电脑&#xff0c;导致这些电子产品的价格下降&#xff0c;所以我们很轻易就能够买得起这样的产品。而在手机、电脑普及之后&#…

安卓APP_ Fragment(2)—— Activity与Fragment的通信

摘自&#xff1a;安卓APP_ Fragment&#xff08;2&#xff09;—— Activity与Fragment的通信 作者&#xff1a;丶PURSUING 发布时间&#xff1a; 2021-04-16 17:23:44 网址&#xff1a;https://blog.csdn.net/weixin_44742824/article/details/115743009 目录 Activity与Fragm…

java socket 判断Socket连接失效

要判断socket连接链路是否可用时&#xff0c;不能通过socket.isClosed() 和 socket.isConnected() 方法判断&#xff0c;要通过心跳包 socket.sendUrgentData(0xFF) 。 当第一次连接成功后&#xff0c; socket.isClosed() false, socket.isConnected()true&#xff0c;只有在自…

安卓APP_ Fragment(3)—— Fragment的生命周期

摘自&#xff1a;安卓APP_ Fragment&#xff08;3&#xff09;—— Fragment的生命周期 作者&#xff1a;丶PURSUING 发布时间&#xff1a; 2021-04-16 22:32:12 网址&#xff1a;https://blog.csdn.net/weixin_44742824/article/details/115768202 目录 Fragment生命周期函数一…

安卓APP_ 布局(8) —— 基于 RecyclerView 的 ViewPager2翻页

摘自&#xff1a;安卓APP_ 布局&#xff08;8) —— 基于 RecyclerView 的 ViewPager2翻页 作者&#xff1a;丶PURSUING 发布时间&#xff1a; 2021-04-20 15:37:54 网址&#xff1a;https://blog.csdn.net/weixin_44742824/article/details/115803077 viewpager2 是对Recycler…

安卓APP_ Fragment(4)—— Fragment + ViewPager2 模拟微信首页 (1)两者联动实现翻页

摘自&#xff1a;安卓APP_ Fragment&#xff08;4&#xff09;—— Fragment ViewPager2 模拟微信首页 &#xff08;1&#xff09;两者联动实现翻页 作者&#xff1a;丶PURSUING 发布时间&#xff1a; 2021-04-20 17:46:59 网址&#xff1a;https://blog.csdn.net/weixin_4474…

Linux网络编程(Socket)

目录网络编程&#xff08;Socket&#xff09;概述引入网络编程通识扫盲socket套接字套接字描述符字节序socket编程步骤Linux提供的API简析创建套接字即连接协议[socket]&#xff08;服、客&#xff09;绑定IP和端口[bind]&#xff08;服&#xff09;地址转换api字节序转换api监…

嵌入式开发概述(树莓派介绍)

目录嵌入式定义嵌入式芯片选型ARM架构ARM树莓派嵌入式定义 国内普遍认同的嵌入式系统的定义是以应用为中心&#xff0c;以计算机技术为基础&#xff0c;软硬件可裁剪&#xff0c;适应应用系统对功耗、可靠性、成本、体积、功耗等严格要求的专用计算机系统。 嵌入式系统是软件和…

ubuntu 16gcc g++版本降级

打算在ubuntu16上编译linux3.4.66内核&#xff0c;但是遇到 In file included from include/linux/compiler.h:48:0, from include/linux/stddef.h:4, from include/linux/posix_types.h:4, from include/linux/types.h:17, from include/linux/page-flags.h:8, from kern…

android 系统gpu 调试_【资讯】高通公布首批可OTA更新GPU驱动手机:谷歌Pixel 4/三星S10在列...

文章转载自&#xff1a;iT之家原文链接&#xff1a;https://www.ithome.com/0/479/483.htm(IT之家3月25日消息) 谷歌今天宣布了一系列面向游戏开发者的新工具&#xff1a;Google Play Asset Delivery、Android性能调节器&#xff0c;Android GPU检查器和Cloud Firestore等&…

cURL库

一、cURL库可以做什么 1.cURL是一个文件传输工具&#xff0c;支持很多协议 二、cURL库的用法 1.初始化 $urlcurl_init() 2.设置选项 curl_setopt($url,CURLOPT_URL&#xff0c;"http://www.baidu.com") curl_setopt($url,string option,mixed value) 3.执行cURL会话 …