css3 flex 布局

今天做一个小实战,需要让一个登录框始终保持水平和垂直居中,第一个想到的就是通过定位(要想让一个div居中,采用定位可以解决,示例),

然后开始接触flex布局,学完感觉真的好用,现把知识点记录一下,以便自己日后查看(学习教程:阮大师的教程),笔记开始:

传统的布局:围绕盒子模型(border、margin、padding、content)   定位(position)、浮动(float)等。

flex布局又叫弹性布局 , 主要内容包括两大部分有: 容器(父元素)的六个属性和项目(子元素)的六个属性

基本概念:

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

 

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

主轴的开始位置(与边框的交叉点)叫做

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

 

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

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

 

一、容器的六个属性:

1、flex-direction属性:决定主轴的方向,有四个属性值 

row | row-reverse | column | column-reverse;

  • row:默认,主轴为水平方向,起点在左端;
  • row-reverse:主轴在水平方向,起点在右端;
  • column:主轴在垂直方向,起点在上边;
  • column-reverse:主轴在垂直方向,起点在下边;

2、flex-wrap属性:决定当一条轴线排不下所有的项目时,是否换行,有三个属性值:

nowrap | wrap | wrap-reverse;

  • nowrap:默认,不换行,当排不下时,会按项目的flex-shrink属性(见下,项目的缩小比例,默认为1)的值来对项目进行缩小;
  • wrap:换行,第一行在上方;
  • wrap-reverse:换行,第一行在下方;

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

4、justify-content属性:定义了项目在主轴上的对齐方式,有五个属性值:

flex-start | flex-end | center | space-between | space-around

  • flex-start:默认值,主轴上起点对齐;
  • flex-end:主轴上终点对齐;
  • center:在主轴上居中;
  • space-between:两端(起点和终点)对齐,项目之间的间隔都相等;
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍

   具体的视觉上的对齐方式与主轴的方向有关,在主轴方向为默认情况下(主轴为水平方向,起点在左端):

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

5、align-items属性:定义项目在交叉轴上的对齐方式,有五个属性值:

flex-start | flex-end | center | baseline | stretch;

  • flex-start:默认值,交叉轴上起点对齐;
  • flex-end:交叉轴上终点对齐;
  • center:在交叉轴上居中;
  • baseline:
  • stretch:

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

flex-start | flex-end | center | space-between | space-around | stretch

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

二、项目的属性

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

  • order:整数

2、flex-grow属性:定义项目的放大比例,当有剩余空间时即会根据该值进行放大,默认为0,即有剩余空间时也不放大

如果所有项目的

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

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

如果所有项目的

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

负值对该属性无效

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

auto
,即项目的本来大小。

可以设为跟

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

5、flex属性:是

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

该属性有两个快捷值:

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

6、align-self属性:允许单个项目有与其他项目不一样的对齐方式,可覆盖

align-items
属性。默认值为
auto
,表示继承父元素的
align-items
属性,如果没有父元素,则等同于
stretch

有六个属性值:auto | flex-start | flex-end | center | baseline | stretch

 

主要的注意点有:

  • 任何元素都可以设置成弹性布局;
  • 弹性容器中,只有直接子元素为弹性元素;
  • 要想让其孙元素也为弹性元素,要在相应的弹性子元素上添加样式display:inherit。

 

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

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

相关文章

ios wkweb设置图片_iOS WKWebView的使用

WKWebView的使用前言最近项目中的UIWebView被替换为了WKWebView,因此来总结一下。示例Demo:WKWebView的使用本文将从以下几方面介绍WKWebView:1、WKWebView涉及的一些类2、WKWebView涉及的代理方法3、网页内容加载进度条和title的实现4、JS和…

元组的详细操作

一、创建元组 name(chinese,gansu,beijing)创建空元组name()元组中只包含一个元素时,需要在元素后面添加逗号消除歧义name(chinese,) 二、访问元组 元组可以使用下标索引来访问元组中的值name(chinese,gansu,beijing)假如要访问chinese则使用name[0] 三、修改元组 元…

Spring Data JDBC通用DAO实现–迄今为止最轻量的ORM

我很高兴宣布Spring Data JDBC存储库项目的第一个版本。 这个开放源代码库的目的是为基于Spring框架中 JdbcTemplate关系数据库提供通用,轻量且易于使用的DAO实现,与项目的Spring Data 框架兼容。 设计目标 轻巧,快速且开销低。 只有少数几个…

【Spark】SparkStreaming-加载外部配置文件

SparkStreaming-加载外部配置文件 spark加载配置文件_百度搜索Spark加载外部配置文件 - CSDN博客spark读取配置文件中的配置 - CSDN博客spark加载properties配置文件方法 - u013013024的博客 - CSDN博客Spark 官方文档(4)——Configuration配置 - bigbi…

对计算机财务管理的理解,计算机财务管理

计算机财务管理1、引用(P4-P5);易出名词解释、选择题。应识记、理解。答:(1)相对引用(2)绝对引用(3)混合引用2、IF、SUM、VLOOKUP、DGET函数的使用方法(P22、P28、P30、P31) 识记、理解用途,能应用。答:IF函数用逻辑表达式来判断指…

卡盟主站搭建_搭建卡盟主站下载|搭建卡盟主站教程 (附带源码)百度云_ - 极光下载站...

最近,很多小伙伴们都在想搭建一个卡盟的主站,但是鉴于很多人都不太懂编程,也不知道如何找到源码。所以现在小编就为大家带来搭建卡盟主站教程,而且还把源码也一起送来了,想要搭建卡盟主站的话就记得一定要下载哦&#…

【期望DP】

【总览】 【期望dp】 求解达到某一目标的期望花费:因为最终的花费无从知晓(不可能从$\infty$推起),所以期望dp需要倒序求解。 设$f[i][j]$表示在$(i, j)$这个状态实现目标的期望值(相当于是差距是多少)。 首…

复习HTML CSS(2)

n 项目符号嵌套编号思路 标签的内容&#xff08;文本、项目符号、表格、图片等&#xff09;必须放在最底层标记中。 n 图片标记&#xff08;行内元素&#xff0c;单边标记&#xff09; l 语法&#xff1a;<img 属性 “值”> l 常用属性 Width&#xff1a;图片宽…

Spring MVC:使用基于Java的配置创建一个简单的Controller

这是我博客上与Spring MVC相关的第一篇文章。 开端总是令人兴奋的&#xff0c;因此我将尽量简洁明了。 Spring MVC允许以最方便&#xff0c;直接和快速的方式创建Web应用程序。 开始使用这项技术意味着需要Spring CORE的知识。 在文章中&#xff0c;您将了解有关创建简单的Spri…

中鸣循迹机器人_自动循迹机器人控制系统的设计

马家庆,于兆勤,刘建群,黄惠敬,陈炜楠摘要&#xff1a;循迹机器人是智能机器人领域内非常重要且被广泛研究的一种智能移动装置&#xff0c;国内许多重要的比赛都以循迹机器人为核心进行开展的。本文设计的智能循迹避障机器人的控制系统主要由四个模块组成&#xff1a;最小系统模…

2、创建分类器笔记

创建分类器 简介&#xff1a;分类是指利用数据的特性将其分类成若干类型的过程。分类与回归不同&#xff0c;回归的输出是实数。监督学习分类器就是用带标记的训练数 据建立一个模型&#xff0c;然后对未知的数据进行分类。分类器可以实现分类功能的任意算法&#xff0c;最简单…

天刀现在最新服务器,天涯明月刀8.21服务器更新公告

原标题&#xff1a;天涯明月刀8.21服务器更新公告青龙乱舞区、大地飞鹰区、天命风流区、沧海云帆区、边城浪子区全部服务器将在8月21日6:00~12:00停机维护更新&#xff0c;维护完成后上述各服务器客户端版本更新至2.0.95.5。本次维护主要调整和修改内容如下&#xff0c;给您带来…

复习上学期的HTML CSS(1)

自己跟着网上教程复习上学期的HTML CSS&#xff0c;因为已经忘得差不多了&#xff0c;而且现在学的js也要以HTML CSS为基础&#xff0c;坚持每天持续更新。 n B/S 网络结构 Browser/Server 浏览器/服务器&#xff0c;这是现在最流行的网络模式。如新浪网、凤凰网等。 C/S Clie…

XAML或JavaFx?

这是使用XAML和JavaFx构建应用程序的快速&#xff0c;主观&#xff0c; 无权且非常不科学的比较。 比较是基于我与每个人合作的个人经验。 在XAML方面&#xff0c;这意味着WPF和Win8存储应用程序 。 在JavaFx方面&#xff0c;这意味着Windows 7应用程序。 JavaFX JavaFx被Orac…

java面试2

1、list中去重&#xff08;无序&#xff0c;有序&#xff09; 2、list中记录每个出现次数&#xff0c;并去重 public static void main(String[] args) { List<String> li2 new ArrayList<String>(); li2.add("11"); l…

mongodb修改数据语句_MongoDB 之 手把手教你增删改查 MongoDB - 2

如果没看到我的金玉良言的话,就重新打开一次客户端和服务端吧本章我们来学习一下关于 MongoDB的增删改查一.MongoDB操作 之 原生ORM,根本不存在SQL语句创建数据库:这里和一般的关系型数据库一样,都要先建立一个自己的数据库空间嗯嗯嗯嗯,我感受到了你内心的惊呼,瞅瞅你们这些没…

星战前夜服务器维护时间,EVE星战前夜开测时间在什么时候 什么时候测试

EVE星战前夜什么时候开测&#xff0c;EVE星战前夜的测试时间在什么时候&#xff0c;想要知道EVE星战前夜测试时间的小伙伴一起来看看EVE星战前夜的相关资讯&#xff0c;了解一下游戏的开测时间吧。EVE星战前夜目前仍在开发阶段&#xff0c;目前没有进行大范围的测试&#xff0c…

使用Maven Failsafe和TestNG分别运行单元测试和集成测试

最近&#xff0c;对于我的新宠物项目&#xff0c;我决定我希望在标准mvn测试期间执行一些测试&#xff0c;而仅在不同阶段执行一些其他测试 &#xff0c;我们称其为集成阶段。 我在谷歌上搜索&#xff0c;似乎没有任何工作&#xff0c;因此在努力使安装工作顺利进行之后&#x…

3、预测模型笔记

预测模型 1、简介 预测建模&#xff08;Predictive modeling&#xff09;是一种用来预测系统未来行为的分析技术&#xff0c;它由一群能够识别独立输入变量与反馈目标关联关系的算法构成。根据观测值创建一个数学模型&#xff0c;然后用这个模型去预测未来发生的事情。 预测模型…

lintcode-138-子数组之和

138-子数组之和 给定一个整数数组&#xff0c;找到和为零的子数组。你的代码应该返回满足要求的子数组的起始位置和结束位置 注意事项 There is at least one subarray that its sum equals to zero. 样例 给出 [-3, 1, 2, -3, 4]&#xff0c;返回[0, 2] 或者 [1, 3]. 标签 子数…