Flex弹性布局

 

1 Flex: 弹性布局 (转)

任何一个容器都可以指定为 Flex 布局。

1 .box {
2  display: flex;
3 }

行内元素也可以使用 Flex 布局。

1 .box{
2   display: inline-flex;
3 }

注意,设为 Flex 布局以后,子元素的 

float
clear 
和 
vertical-align 
属性将失效。

2 Flex: 基本概念

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

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

main start
,结束位置叫做
main end
;交叉轴的开始位置叫做
cross start
,结束位置叫做
cross end

项目默认沿主轴排列。单个项目占据的主轴空间叫做

main size
,占据的交叉轴空间叫做
cross size

3 容器的属性

flex-direction      // 属性决定主轴的方向(即项目的排列方向)
flex
-wrap        // 属性定义,如果一条轴线排不下,如何换行
flex
-flow       // 属性是
flex-direction
属性和
flex-wrap
属性的简写形式,默认值为
row nowrap

justify
-content   // 属性定义了项目在主轴上的对齐方式
align
-items     // 属性定义项目在交叉轴上如何对齐。
align
-content   // 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用

3.1 flex-direction属性

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

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

它可能有 4 个值

1 row(默认值):      主轴为水平方向,起点在左端。
2 row-reverse:      主轴为水平方向,起点在右端。
3 column:          主轴为垂直方向,起点在上沿。
4 column-reverse:    主轴为垂直方向,起点在下沿。

3.2 flex-wrap属性

默认情况下,项目都排在一条线(又称"轴线")上。

flex-wrap 
属性定义,如果一条轴线排不下,如何换行。

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

它可能取三个值。

(1)

nowrap
(默认):不换行。

(2)

wrap
:换行,第一行在上方。

(3)

wrap-reverse
:换行,第一行在下方。

3.3 flex-flow

flex-flow
属性是
flex-direction 
属性和
flex-wrap 
属性的简写形式,默认值为  
row nowrap

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

3.4 justify-content属性

justify-content 
属性定义了项目在主轴上的对齐方式。

1 .box {
2   justify-content: flex-start | flex-end | center | space-between | space-around;
3 }

它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

1 flex-start(默认值):左对齐
2 flex-end:右对齐
3 center: 居中
4 space-between:两端对齐,项目之间的间隔都相等。
5 space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

3.5 align-items属性

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

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

它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

1 flex-start:交叉轴的起点对齐。
2 flex-end:交叉轴的终点对齐。
3 center:交叉轴的中点对齐。
4 baseline: 项目的第一行文字的基线对齐。
5 stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

3.6 align-content属性

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

1 .box {
2   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
3 }

该属性可能取6个值。

1 flex-start:与交叉轴的起点对齐。
2 flex-end:与交叉轴的终点对齐。
3 center:与交叉轴的中点对齐。
4 space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
5 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
6 stretch(默认值):轴线占满整个交叉轴。

4、项目的属性

以下6个属性设置在项目上。

1 order
2 flex-grow
3 flex-shrink
4 flex-basis
5 flex
6 align-self

4.1 order属性

order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0。

1 .item {
2   order: <integer>;
3 }

4.2 flex-grow属性

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

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

如果所有项目的 

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

4.3 flex-shrink属性

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

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

如果所有项目的 

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

负值对该属性无效。

4.4 flex-basis属性

flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为
auto
,即项目的本来大小。

1 .item {
2   flex-basis: <length> | auto; /* default auto */
3 }

它可以设为跟

width
height
属性一样的值(比如350px),则项目将占据固定空间

4.5 flex属性

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

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

该属性有两个快捷值:

auto
 (
1 1 auto
) 和 none (
0 0 auto
)。

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

4.6 align-self属性

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

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

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

5 注

本文转自阮一峰的网络日志 

 

本文转载于:猿2048➧https://www.mk2048.com/blog/blog.php?id=h0ajakkj&title=Flex弹性布局

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

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

相关文章

洛谷P3045 [USACO12FEB]牛券Cow Coupons

P3045 [USACO12FEB]牛券Cow Coupons 71通过248提交题目提供者洛谷OnlineJudge标签USACO2012云端难度提高/省选-时空限制1s / 128MB提交 讨论 题解 最新讨论更多讨论 86分求救题目描述 Farmer John needs new cows! There are N cows for sale (1 < N < 50,000), and …

python数据挖掘电影评分分析_Pyhon数据分析项目——男女电影评分差异比较

《用Python玩转数据》数据分析项目一、程序功能基于MovieLens100k数据集中男性女性对电影的评分来判断男性还是女性电影评分的差异性更大。二、数据来源数据集下载&#xff1a;http://files.grouplens.org/datasets/movielens/ml-100k.zip数据含义&#xff1a;u.data表示100k条…

发掘Apache Camel的力量

最近几年&#xff0c;ESB软件越来越受欢迎。 如果大多数人通常知道什么是ESB&#xff0c;那么他们很少会清楚地了解这种体系结构的不同组件的确切作用。 例如&#xff0c;Apache ServiceMix由三个主要组件组成&#xff1a;Apache Karaf&#xff08;OSGI容器&#xff09;&#…

unix/linux系统中文件分为哪些类型?,到底该如何理解 Unix/Linux 的文件系统?看这篇就知道了...

原标题&#xff1a;到底该如何理解 Unix/Linux 的文件系统&#xff1f;看这篇就知道了作者&#xff1a;舠

【Luogu】P1131时态同步(树形DP)

题目链接 甚矣吾衰也&#xff01;这么简单的DP我都不会了 太恐怖了 树形DP&#xff0c;从子树里选出时间最长的来&#xff0c;剩下的调到这个最长时间即可。 #include<cstdio> #include<cctype> #include<algorithm> #include<cstring>using std::max;…

HTML小记

1、页面内跳转 当<a>元素用于页面内的锚点跳转时&#xff0c;应该先为该页面设置一些锚点&#xff0c;而定义锚点有两种办法&#xff1a; 通过<a>元素的name属性来定义&#xff0c;如&#xff1a;<a name"anchor-name">name属性的值就是锚点的名…

python3连接数据库失败_python3使用pymysql连接mysql数据库报Keyerror

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼不好意思Traceback (most recent call last):File "d:\Python\practice2\mydbconn.py", line 5, in conn pymysql.connect(usertestuser, passwdtestpasswd,host192.168.1.3, dbtest,charsetutf8)File "C:\Users\t…

MantisBT 问题分配显示 姓名

MantisBT 在提交问题的时候&#xff0c;系统默认“分配”给备选账号&#xff0c;而不是姓名。这样在使用的时候很不便。能够通过改动配置文件来改变&#xff0c;找到MantisBT根文件夹下文件config_inc.php&#xff0c;用文本编辑器打开。代码例如以下&#xff1a; <?php $g…

使用多种MIME类型测试REST

1.概述 本文将重点介绍测试具有多种媒体类型/表示形式的RESTful服务。 这是关于使用Spring和基于Java的配置的Spring Security设置安全的RESTful Web Service的系列文章的第十篇。 REST with Spring系列&#xff1a; 第1部分 – 使用Spring 3.1和基于Java的配置引导Web应用程序…

firewallD卸载Linux,在Ubuntu 18.04/16.04系统上安装和使用Firewalld的方法

本文介绍Firewalld在Ubuntu 18.04或Ubuntu 16.04发行版上的安装方法及基本用法。简介Firewalld是Linux防火墙管理工具&#xff0c;支持IPv4、IPv6、以太网桥和IPSet防火墙设置&#xff0c;它充当Linux内核的netfilter框架的前端&#xff0c;同时Firewalld是RHEL 7系列上的默认防…

JavaWeb学习中的小问题

1. HttpServletRequest和ServletRequest之间的区别&#xff1f; 再看别人项目的时候突然看到一句&#xff1a; ServletRequest request&#xff1b;HttpServletRequest hsRequest (HttpServletRequest) request;// 获取HttpServletRequest对象瞬间就有一点懵逼 &#xff0c;赶…

python 结构数组_Python数组

数组是一个容器&#xff0c;它可以容纳一定数量的项目&#xff0c;这些项目是相同的类型。 大部分数据结构都使用数组来实现它们的算法。 以下是理解数组(Array)概念的重要术语。元素 - 存储在数组中的每个项目称为元素。索引 - 数组中元素的每个位置都有一个数字索引&#xff…

广播 布局文件代码

<?xml version"1.0" encoding"utf-8"?><RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android" xmlns:app"http://schemas.android.com/apk/res-auto" xmlns:tools"http://schemas.android.com/…

PCGen的垃圾收集分析

介绍 我决定结合我的两个软件爱好&#xff0c;并在PCGen上进行一些分析&#xff0c; PCGen是一种流行的基于Java的开放源代码角色生成器&#xff0c;用于角色扮演游戏。 我用Censum &#xff0c;我们&#xff08; jClarity的&#xff09;新的垃圾收集日志分析工具来进行分析。 …

THINKPHP增删改查--(改)

1.CURD 控制器?>namespace Home\Controller;use Think\Controller;class CurdController extends Controller{ public function index(){ $db_student D(Student); $data_student $db_student->relation(true)->select();// dump($data_student); $this->assign…

Linux监控CPU关闭服务器,监控Linux服务器CPU和内存

利用脚本获取Linux服务器的CPU和内存。需要安装bc计算器yum install -y bc创建执行脚本计算CPU利用率&#xff0c;配置了5秒采样。执行脚本&#xff0c;5秒后输出采集日期|CPU负载|可用内存|总内存#!/bin/sh##echo user nice system idle iowait irq softirqCPULOG_1$(cat /pro…

springboot不会运行gc_SpringBoot 和JVM 调优(深度好文,建议收藏)

点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐]项目调优作为一名工程师&#xff0c;项目调优这事&#xff0c;是必须得熟练掌握的事情。在SpringBoot项目中&#xff0c;调优主要通过配置文件和配置JVM的参数的方式进行。一、修改配置文件关于修改配置文件 application.p…

移动端原生js,css3实现轮播图

一、功能需求 1、自动播放2、滑动切换3、点击切换 二、思路分析 html代码&#xff1a; <div class"container">   <ul class"list clearfix">   <li class"item fl item5">图5</li>   <li class"item fl …

关于换行这个动作,win 和 mac 的实现

‘\r是回车&#xff0c;前者使光标到行首&#xff0c;&#xff08;carriage return&#xff09;\n是换行&#xff0c;后者使光标下移一格&#xff0c;&#xff08;line feed&#xff09;\r 是回车&#xff0c;return\n 是换行&#xff0c;newline对于换行这个动作&#xff1a;u…

你好骆驼:自动文件传输

Apache Camel在其主页上 &#xff08;以及Camel用户指南中 &#xff09;将其描述为“基于已知企业集成模式的通用开源集成框架”。 Camel框架基于《 企业集成模式 》一书&#xff0c;并提供了该书中描述的模式的实现 。 我看一下这篇文章中使用Camel的“ Hello World”类型示例…