Flex布局和Grid布局实例分享
flex规划是一个网页规划
容器的属性
1.display:flex/inline-flex 2.flex-direction 决议主轴的标的目的(即项目的摆列标的目的) flex-direction: row | row-reverse | column | column-reverse; row(默许值):主轴为水平标的目的,起点在左端。 row-reverse:主轴为水平标的目的,起点在右端。 column:主轴为垂直标的目的,起点在上沿。 column-reverse:主轴为垂直标的目的,起点鄙人沿。 3.flex-wrap 决议换不换行,默许不换行 flex-wrap: nowrap | wrap | wrap-reverse; 4.flex-flow 是flex-direction和flex-wrap的简写方式 flex-flow: <flex-direction> || <flex-wrap>; 5.justify-content 决议了项目在主轴上的对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around; flex-start(默许值):左对齐 flex-end:右对齐 center: 居中 space-between:两端对齐,项目之间的间隔都相等。 space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 6.align-item 定义垂直位置,可以通过这个定义垂直居中 align-items: flex-start | flex-end | center | baseline | stretch; flex-start:穿插轴的起点对齐。 flex-end:穿插轴的终点对齐。 center:穿插轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch(默许值):假如项目未设定高度或设为auto,将占满整个容器的高度。 7.align-content 定义了多根轴线的对齐方式。假如项目只要一根轴线,该属性不起作用。 align-content: flex-start | flex-end | center | space-between | space-around | stretch; flex-start:与穿插轴的起点对齐。 flex-end:与穿插轴的终点对齐。 center:与穿插轴的中点对齐。 space-between:与穿插轴两端对齐,轴线之间的间隔均匀分布。 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 stretch(默许值):轴线占满整个穿插轴。
grid规划很好,但是兼容性此刻并不是很好,测试了几个阅读器,支撑谷歌、火狐、Opera,不支撑safari,IE10以下,360,QQ阅读器
一、网格容器
1.display:grid/grid-inline
2.grid-template-columns和grid-template-rows属性可以显式的设定一个网格的列和行
fr单位可以帮忙我们创立一个弹列的网格轨道。它代表了网格容器中可用的空间(就像Flexbox中无单位的值)
grid-template-columns: 1fr 1fr 2fr
minmax()函数来创立网格轨道的最小或最大尺寸。minmax()函数接受两个参数:第一个参数定义网格轨道的最小值,第二个参数定义网格轨道的最大值。可以接受任何长度值,也接受auto值。auto值同意网格轨道基于内容的尺寸拉伸或挤压
grid-template-rows: minmax(100px, auto); grid-template-columns: minmax(auto, 50%) 1fr 3em;
repeat()可以创立反复的网格轨道。这个适用于创立相等尺寸的网格项目和多个网格项目。repeat()接受两个参数:第一个参数定义网格轨道应当反复的次数,第二个参数定义每个轨道的尺寸。
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 30px repeat(3, 1fr) 30px;
二、间距
1.grid-column-gap 创立列与列之间的间距
2.grid-row-gap 创立行与行之间的间距
3.grid-gap
grid-gap是grid-row-gap和grid-column-gap两个属性的缩写,假如它指定了两个值,那么第一个值是设定grid-row-gap的值,第二个值设定grid-column-gap的值。假如只设定了一个值,表示行和列的间距相等,也就是说grid-row-gap和grid-column-gap的值雷同。
三、网格线
1.【grid-row-start】【grid-row-end】【grid-column-start】【grid-column-end】
通过网格线可以定位网格项目。网格线实际上是代表线的开端、完毕,两者之间就是网格列或行。每条线是从网格轨道开端,网格的网格线从1开端,每条网格线逐渐增添1
grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3;
2.【grid-row】【grid-column】
grid-row是grid-row-start和grid-row-end的简写。grid-column是grid-column-start和grid-column-end的简写。假如只供给一个值,则指定了grid-row-start(grid-column-start)值;假如供给两个值,第一个值是grid-row-start(grid-column-start)的值,第二个值是grid-row-end(grid-column-end)的值,两者之间必需要用/隔开
grid-row: 2;
grid-column: 3 / 4;
3.关键词span后面紧随数字,表示合并多少个列或行
grid-row: 1 / span 3; grid-column: span 2;
4.【grid-area】指定四个值,第一个值对应grid-row-start,第二个值对应grid-column-start,第三个值对应grid-row-end,第四个值对应grid-column-end
grid-area: 2 / 2 / 3 / 3;
5.网格线命名
分配网格线名称必需用方括号[网格线名称],然后后面紧跟网格轨道的尺寸值。
grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];
使用repeat()函数可以给网格线分配雷同的名称。
grid-template-rows: repeat(3, [row-start] 1fr [row-end]); grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
使用repeat()函数可以给网格线命名,这也致使多个网格线具有雷同的网格线名称。雷同网格线名称指定网格线的位置和名称,也且会主动在网格线名称后面增加对应的数字,使其网格线名称也是独一的标识符
使用雷同的网格线名称可以设定网格项目的位置。网格线的名称和数字之间需要用空格分开
grid-row: row-start 2 / row-end 3; grid-column: col-start / col-start 3;
6.网格区域命名
grid-template-areas 援用网格区域名称也可以设定网格项目位置
grid-template-areas: "header header" "content sidebar" "footer footer"; grid-template-rows: 150px 1fr 100px;
grid-template-columns: 1fr 200px;
7.grid-auto-flow 网格默许流标的目的是row,可以通过grid-auto-flow属性把网格流的标的目的改动成column
grid-auto-flow: column
四、对齐
【网格项目对齐方式(Box Alignment)】
CSS的Box Alignment Module补充了网格项目沿着网格行或列轴对齐方式。
【justify-items】
【justify-self】
justify-items和justify-self指定网格项目沿着行轴对齐方式;align-items和align-self指定网格项目沿着列轴对齐方式。
justify-items和align-items利用在网格容器上
【align-items】
【align-self】
align-self和justify-self属性用于网格项目本身对齐方式
这四个属性主要接受以部属性值:
auto | normal | start | end | center | stretch | baseline | first baseline | last baseline
相关引荐:
Flex规划的可伸缩性详解
CSS3中关于Flex规划的详解
CSS使用Grid规划构建网站首页
以上就是Flex规划和Grid规划实例分享的具体内容,更多请关注百分百源码网其它相关文章!