彩票网站 模块,wordpress 主题安装失败,亿诚建设项目管理有限公司网站,有免费的微网站是什么今天做一个小实战#xff0c;需要让一个登录框始终保持水平和垂直居中#xff0c;第一个想到的就是通过定位#xff08;要想让一个div居中#xff0c;采用定位可以解决#xff0c;示例#xff09;#xff0c;
然后开始接触flex布局#xff0c;学完感觉真的好用#x…今天做一个小实战需要让一个登录框始终保持水平和垂直居中第一个想到的就是通过定位要想让一个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-aroundflex-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在交叉轴上居中baselinestretch
6、align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线该属性不起作用有六个属性值
flex-start | flex-end | center | space-between | space-around | stretchstretch默认值轴线占满整个交叉轴。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。
