css3 flex布局九宫格,css3 flex 布局-程序员宅基地

技术标签: css3 flex布局九宫格  

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

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

传统的布局:围绕盒子模型(border、margin、padding)   定位(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,即如果空间不足,该项目将缩小

如果所有项目的flex-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。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_33957278/article/details/119397763

智能推荐

Winform 判断Combobox控件先择值是否为空_imagecomboboxedit 如何判断未空-程序员宅基地

文章浏览阅读6.1k次。前面用.Item试了下,结果是取到绑定在Combobox的数据,不管有没有选择,都会满足不为空的要求,后来就用Text试了下,满足我所需要的要求。(Combobox内我没有设置默认显示某值)if (Combobox.Text.Trim().Length != 0){ MessageBox.Show("Combobox不为空!");}else{ MessageBox.Show("Comb_imagecomboboxedit 如何判断未空

每天掉多少根头发才会秃?你猜!-程序员宅基地

文章浏览阅读975次。最近……遇到了人生中最大的难题我开始疯狂掉头发了一开始觉得只是掉几根头发没什么大事后来发现自己发际线居然后移了!我年纪轻轻的难道要秃了???为什么?难道真如萌萌说的是老天..._一天掉几十根头发会不会掉光

研学-元胞自动机模拟疫情传播_元胞自动机模型解决什么问题-程序员宅基地

文章浏览阅读7.6k次,点赞30次,收藏132次。蒙特卡罗方法模拟疫情传播论文提要2020年伊始,新冠肺炎席卷全球。长时间潜伏期、极高的传染率,使得全人类面对这次疫情显得有些措手不及。为了更好地认识、防控传染病,本文采用蒙特卡罗方法中的一种——元胞自动机,借鉴著名数学家约翰·康威所发明的生命游戏规则,自创规则进行疫情模拟。最终发现严格的防控、警惕的意识与强大的医疗水平均是抗击疫情必不可少的内容。政府越早采取防控措施防控效果越好;并且医疗水平的支持更是防控的关键。主题词蒙特卡罗方法;元胞自动机;疫情传播正文1 研究背景1.1 传染病介绍在人_元胞自动机模型解决什么问题

gpio子系统和pinctrl子系统(中)_pinctrl_add_gpio_range-程序员宅基地

文章浏览阅读797次。转载地址:http://www.cnblogs.com/rongpmcu/p/7662755.htmlpinctrl子系统核心实现分析pinctrl子系统的内容在drivers/pinctrl文件夹下,主要文件有(建议先看看pinctrl内核文档Documentation/pinctrl.txt):core.cdevicetree.cpinconf.cpinmux.cpinctrl-xxx.cco..._pinctrl_add_gpio_range

如何解决Golang获取google.golang.org/protobuf包报错的问题-程序员宅基地

文章浏览阅读3.1k次。今天在重新运行之前的老项目时,..._google.golang.org/protobuf

我的Android进阶之旅------>Android实现数据存储技术_android getcache(uri key)-程序员宅基地

文章浏览阅读2.7k次,点赞2次,收藏4次。本文介绍Android中的5种数据存储方式。数据存储在开发中是使用最频繁的,在这里主要介绍Android平台中实现数据存储的5种方式,分别是:1 使用SharedPreferences存储数据2 文件存储数据3 SQLite数据库存储数据4 使用ContentProvider存储数据5 网络存储数据下面将为大家一一详细介绍。第一种: 使用SharedPr_android getcache(uri key)

随便推点

7-19 计算火车运行时间 (15分)_根据火车的出发时间和达到时间,编写程序c++-程序员宅基地

文章浏览阅读465次。本题要求根据火车的出发时间和达到时间,编写程序计算整个旅途所用的时间。输入格式:输入在一行中给出2个4位正整数,其间以空格分隔,分别表示火车的出发时间和到达时间。每个时间的格式为2位小时数(00-23)和2位分钟数(00-59),假设出发和到达在同一天内。输出格式:在一行输出该旅途所用的时间,格式为“hh:mm”,其中hh为2位小时数、mm为2位分钟数。输入样例:1201 1530输出样例:03:29【源代码】#include <iostream>#include_根据火车的出发时间和达到时间,编写程序c++

【C语言】单链表逆转-程序员宅基地

文章浏览阅读48次。单链表逆转

三分钟使用vue-json-excel插件,将table表格数据导出为Excel文件实践_vue2 vue-json-excel 分sheet-程序员宅基地

文章浏览阅读1.5k次。提示:我这是使用了element-ui样式框架,默认是您已经安装了element-ui安装vue-json-excel插件npm install vue-json-excel --save引入vue-json-excel组件<template> <div> <download-excel :fields = "json_field..._vue2 vue-json-excel 分sheet

git使用之template模板,gitconfig配置文件的设置及使用-程序员宅基地

文章浏览阅读4.9k次。一、引言多人协作开发一个项目时,版本控制工具是少不了的,git是linux 内核开发时引入的一个优秀代码管理工具,利用它能很好使团队协作完成一个项目。为了规范团队的代码提交,也方便出版本时的release note,更为了出问题时方便代码回溯,所以大家统一用一个模板提交代码是必要的。二、template模板Git中设置template非常简单,只需以下几步即可:1、在根目录建立模板文件如...

2021级-JAVA07 常用类(字符串)_7-3 sdut-string-1 识蛟龙号载人深潜,立科技报国志(1)-程序员宅基地

文章浏览阅读1.7k次,点赞7次,收藏14次。其中data[]是传入的参数。data[]中的每一个元素都是一个完整的人员信息字符串,该字符串由“姓名,性别,年龄,民族”,各项之间用英文半角的逗号分隔。函数须返回 值是汉族的人数。_7-3 sdut-string-1 识蛟龙号载人深潜,立科技报国志(1)

Java网络编程(网络基础(IP&端口号&网络通信协议)、TCP编程、UDP编程和URL编程原理以及常用方法的实例)_isreachable java 实现原理-程序员宅基地

文章浏览阅读893次,点赞3次,收藏17次。网络编程网络基础概述计算机网络:  把分布在不同地理区域的计算机与专门的外部设备用通信线路互连成一个规模大、功能强的网络系统,从而使众多的计算机可以方便地互相传递信息、共享硬件、软件、数据信息等资源。网络编程的目的:​ 直接或间接地通过网络协议与其它计算机实现数据交换,进行通讯。网络编程中有两个主要的问题:如何准确地定位网络上一台或多台主机;定位主机上的特定的应用。..._isreachable java 实现原理