flex 弹性布局学习

news2024/11/17 0:43:27

一.Flex布局:


Flex是Flexible Box 缩写“弹性布局”,用来为盒状模型提供最大得灵活性。

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


.box{
  display: flex;
}

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


.box{
  display: inline-flex;
}

Webkit 内核的浏览器,必须加上-webkit前缀。


.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效

二.基本概念:


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

flex布局方向可设置水平或者垂直

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

(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,

结束位置叫做cross end。

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

(总结:flex布局方式可设置水平或垂直布局。

如果设置为水平方向,则水平方向是主轴,垂直方向为交叉轴。 

如果设置排序方向垂直排序,则垂直方向为主轴,水平方向为交叉轴

三容器属性(父容器可用的属性):

以下6个属性设置在容器上:

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

 3.1 flex-direction属性:

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

.box{
 flex-direction: row | row-reverse | clumn | clumn-reverse
}

4个值:

row(默认值): 主轴为水平方向,起点在左端。

row-revserse: 主轴为水平方向:起点在右端

cloumn:主轴为垂直方向,起点在下沿。

colunm-recerse:主轴为垂直方向,起点在下沿

3.2 flex-wrap属性 

默认情况下,项目都排在一条线(又称“轴线”)上,flex-wrap属性定义,如果一条轴线排不下,如何换行

 

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

它可能取三个值。

(1)nowrap(默认):不换行。

 2)wrap:换行,第一行在上方

 (3)wrap-reverse:换行,第一行在下方   

 3.3 flex-flow

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

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

3.3 justify-content属性:

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

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

 

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

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

3.5 align-items属性

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

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

5个取值

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

3.6 align-content属性

align-content属性定义了多跟轴线的对齐方向,如果项目只有一根轴线,

.box {
 align-centent:'flex-satrt | flex-end | center | space-between | space-around | stretc' 
}

 属性取值6个

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

四、项目的属性(即子元素的属性)

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

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

4.1 order属性

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

.item {
  order: <integer>;
}

 4.2 flex-grow属性

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

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

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

4.3 flex-shrink属性

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

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

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

负值对该属性无效。

4.4 flex-basis属性

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

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

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

4.5 flex属性

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

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

4.6 align-self属性

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

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

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

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

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

相关文章

CAS中ABA问题

在线程1最后需要写入比较时&#xff0c;发现预估值与内存值都为1是相同的&#xff0c;就会误以为之前没有其他线程操作&#xff0c;其时之前线程2将1->2,又将2->1&#xff0c;称为ABA。 4.4.1解决方法 添加类的版本号&#xff0c;来避免ABA问题&#xff0c;如原来内存值…

代码随想录训练营day4

问题一&#xff1a; 面试题 02.07. 链表相交 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 输入 输出 intersectVal 8, list…

无涯教程-jQuery - Fold方法函数

Fold 效果可以与show/hide/toggle一起使用。这样可以像折叠纸一样折叠元素。 Fold - 语法 selector.hide|show|toggle( "fold", {arguments}, speed ); 这是所有参数的描述- horizFirst - 是否先水平折叠。可以是true或false。默认值为false。model - 效果…

数字光源控制器报警说明

Revision Sheet: Rev Data Author Description 1.0 20230729 Shuangyi 数字光源控制器报警说明 V1.0 一.报警说明 当我们所连接的光源负载超出光源控制器本身驱动能力的时候&#xff0c;我们会对控制器进行保护&#xff0c;从以下方式可知道过流的情况&#xff0c;如…

ScheduledThreadPoolExecutor 及 ThreadPoolExecutor的基本使用及说明

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览2.1 为什么不推荐使用Executors去创建线程池 三、…

C# 快速写入日志 不卡线程 生产者 消费者模式

有这样一种场景需求&#xff0c;就是某个方法&#xff0c;对耗时要求很高&#xff0c;但是又要记录日志到数据库便于分析&#xff0c;由于访问数据库基本都要几十毫秒&#xff0c;可在方法里写入BlockingCollection&#xff0c;由另外的线程写入数据库。 可以看到&#xff0c;在…

abp vnext4.3版本托管到iis同时支持http和https协议

在项目上本来一直使用的是http协议,后来因为安全和一些其他原因需要上https协议,如果发布项目之后想同时兼容http和https协议需要更改一下配置信息,下面一起看一下: 1.安装服务器证书 首先你需要先申请一张服务器证书,申请后将证书安装到服务器上(也可以在iis中选择服务器…

第27天-熔断,降级,限流,网关流控,服务链路追踪

1.熔断/降级/限流 1.1.简介 1.1.1.熔断 A服务调用B服务某个功能&#xff0c;由于网络不稳定问题&#xff0c;或者B服务卡机&#xff0c;导致功能时间超长。如果这样的次数太多&#xff0c;我们就可以直接将B服务断路&#xff08;A不再请求B接口&#xff09;&#xff0c;凡是…

OJ练习第145题——并行课程 III

力扣链接&#xff1a;2050. 并行课程 III 题目描述 给你一个整数 n &#xff0c;表示有 n 节课&#xff0c;课程编号从 1 到 n 。同时给你一个二维整数数组 relations &#xff0c;其中 relations[j] [prevCoursej, nextCoursej] &#xff0c;表示课程 prevCoursej 必须在课…

如何高效书写文章访问

一、了解CSDN CSDN&#xff08;CSDN博客&#xff09;是中国最大的IT技术社区和程序员学习平台之一。CSDN成立于1999年&#xff0c;是中国软件开发者网络的缩写&#xff0c;旨在为中国的软件开发者和IT技术爱好者提供学习、交流和分享的平台。以下是关于CSDN的一些介绍&#xff…

1.写uni-app推荐的工具 HBuilderX

ni-app是一个框架&#xff0c;最大的优点是适用性强。你用这个框架写一套代码&#xff0c;他就能转换为各种小程序(微信&#xff0c;支付宝)&#xff0c;App&#xff0c;PC的web的样子 对于目前&#xff08;20230723&#xff09;来讲&#xff0c;在跨端的时候极容易报错。比如…

Ubuntu Server版 之 共享文件 samba和NFS 两种方法

NFS 和 Samba NFS &#xff1a; linux之间资源共享 Samba&#xff1a; 是windows系统与Linux系统之间资源共享的 samba 安装samba 工具 sudo apt install samba 创建共享目录 sudo mkdir /home/shared sudo chmod 777 /home/shared 配置sambd sudo vim /etc/samba/smb.con…

MySQL 实现分库和分表的备份 2023.7.29

1、分库备份 [rootlocalhost mysql-backup]# cat db_bak.sh #!/bin/bash k_userroot bak_password123456 bak_path/root/mysql-backup/ bak_cmd"-u$bak_user -p$bak_password" exc_db"Database|information_schema|mysql|performance_schema|sys" dbname…

SQL-每日一题【1068. 产品销售分析 I】

题目 销售表 Sales&#xff1a; 产品表 Product&#xff1a; 写一条SQL 查询语句获取 Sales 表中所有产品对应的 产品名称 product_name 以及该产品的所有 售卖年份 year 和 价格 price 。 查询结果中的顺序无特定要求。 查询结果格式示例如下&#xff1a; 解题思路 1.题目要…

Go-高质量编程与性能调优

高质量编程&#xff1a; 什么是高质量&#xff1a; ​ ——编写代码能达到正确可靠&#xff0c;简洁清晰的目标 各种边界条件是否考虑完备 异常情况处理&#xff0c;稳定性保证 易读易维护 编程原则 简单性 消除“多余的复杂性”&#xff0c;以简单清晰的逻辑编写代码 不理解…

《Vue3+Typescript》一个简单的日历组件实现

这是一个没有套路的前端博主&#xff0c;热衷各种前端向的骚操作&#xff0c;经常想到哪就写到哪&#xff0c;如果有感兴趣的技术和前端效果可以留言&#xff5e;博主看到后会去代替大家踩坑的&#xff5e; 主页: oliver尹的主页 格言: 跌倒了爬起来就好&#xff5e; 目录 一、…

带宽管理:知识点概述及防火墙带宽管理实验

目录 一、带宽管理技术介绍 1.1 基本概念&#xff1a; 1.2 带宽管理原理介绍&#xff1a; 1.3 接口带宽原理&#xff1a; 1.4 带宽策略原理&#xff1a; 1.5 带宽通道原理 1.6 带宽复用 二、带宽管理实验 一、带宽管理技术介绍 1.1 基本概念&#xff1a; 带宽管理对通…

hMailServer-5.3.3-B1879.exe

hMailServer-5.3.3-B1879.exe

【转】数据治理简介

原文链接&#xff1a;数据治理怎么做&#xff1f;这篇万字长文终于讲清楚了&#xff01; - 知乎 引言&#xff1a; 股份制改革对我国银行业来说只是一个开始&#xff0c;企业在风险管理、创造价值等方面还有很长的路要走。 风险管理要求提供精准的数据模型、创造价值要求充分…

动态线程池问题的解决

项目中需要将线程池也监控管理起来。 于是决定引入了hippo4j&#xff0c;这个引入很简单&#xff0c;官方的例子也很简单&#xff0c;拿过来直接跑。 出现问题了&#xff0c;用的和例子一模一样的&#xff0c;也没什么错&#xff0c;但是就是在服务器的管理控制台上没有找到动态…