从零开始学习前端开发 — 12、CSS3弹性布局

一、分栏布局

1.设置栏数

column-count:数值;

2.设置每栏的宽度

column-width:数值+单位;

注:当设置了column-width,column-count会失效,二者设置其一即可

3.设置栏间距

column-gap:数值+单位;

4.设置栏间隔线

column-rule:5px solid|dashed|dotted black;

5.设置是否跨栏显示

column-span:all(跨栏)|none(不跨栏);

注:a)给需要跨栏显示的元素设置该属性

b) 该属性只有chrome浏览器支持

二、弹性布局

说明:

(1) 当给元素设置了display:flex;后,该元素就成为了弹性盒

(2) 当父元素设置了display:flex;后,子元素的float,clear,vertical-align将会失效

(3) 我们将设置display:flex;属性的父元素称为flex容器,里面所有的子元素称为容器成员或flex项目

(4) 当设置了display:flex;后会随之产生两根轴线:主轴和交叉轴

Flex容器属性

1.设置主轴方向

语法: flex-direction:row|row-reverse|column|column-reverse;

row 默认值,主轴在水平方向,起点在左端

row-reverse 主轴在水平方向,起点在右端

column 主轴在垂直方向,起点在上沿

column-reverse 主轴在垂直方向,起点在下沿

2.设置flex容器是单行显示还是多行显示

语法: flex-wrap:nowrap|wrap|wrap-reverse;

nowrap 默认值,不换行

wrap 换行

wrap-reverse 换行,但行的顺序会倒过来

注:该属性主要针对主轴在水平方向上的时候

3.flex-flow

是flex-direction和flex-wrap的简写方式

flex-flow的默认值为:

flex-flow:row nowrap;

4.设置主轴的对齐方式

语法: justify-content:flex-start|flex-end|center|space-between|space-around;

a)flex-start 默认值,类似于左浮动

b)flex-end 类似于右浮动

c)center 居中对齐

d)space-between flex项目两端对齐,中间间隔相等

e)space-around flex项目两侧的间隔相等

5.设置交叉轴对齐方式

语法: align-items:flex-start|flex-end|center|baseline|stretch;

a) flex-start 对齐交叉轴的起点

b) flex-end 对齐交叉轴的终点

c) center 沿交叉轴方向居中对齐

d) baseline 沿flex项目第一行文字基线对齐

e) stretch 当flex项目没有设置高度或为auto时,将占满整个父元素的高度

注:使用弹性盒如何实现不定宽高元素在父元素中水平垂直都居中

方法如下:

父元素{
display:flex;
justify-content:center;
align-items:center;
}

如何使元素在屏幕窗口水平垂直都居中,设置如下:

html,body{height:100%;}

body{
display:flex;
justify-content:center;
align-items:center;
}

6.设置多根轴线的对齐方式

语法: align-content:flex-start|flex-end|center|space-between|space-around|stretch;

a) flex-start 对齐交叉轴的起点

b) flex-end 对齐交叉轴的终点

c) center 以交叉轴为参考,居中对齐

d) space-between 多根轴线两端对齐,轴线之间间隔相等

e) space-around 轴线两侧的间隔相等

f) stretch 如果flex项目没有设置高度或为auto,将会均分父元素的高度

注: 当只有一根轴线时,此属性不起作用

Flex项目属性

1.设置flex项目的排列顺序

语法: order:数值; (值越小越靠前)

2.设置某个flex项目不同于其他flex项目的交叉轴对齐方式(重写父元素的align-items属性)

语法: align-self:flex-start|flex-end|center|baseline|stretch;

3.设置flex项目的放大比例

语法: flex-grow:0 | 数值;

注:当父元素存在剩余空间时,默认值为0,不放大

4.设置flex项目的缩小比例

语法: flex-shrink:1|数值;

注:当父元素空间不足时,默认flex项目等比例缩小,flex-shrink默认值为1

flex-shrink:0; 即使父元素空间不足,flex项目也不缩小

5.设置flex项目占据主轴的空间

语法:flex-basis:数值+单位;

注:类似于给元素设置宽高;

6.flex属性

flex是flex-grow,flex-shrink,flex-basis的简写方式

默认值: flex:0 1 auto;

flex:1;的两个应用

a) 等比例分配空间

b) 分配剩余空间

原文地址:https://www.cnblogs.com/witkeydu/p/8206726.html

时间: 2024-10-17 21:18:06

从零开始学习前端开发 — 12、CSS3弹性布局的相关文章

从零开始学习前端开发 — 5、CSS布局模型

一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元素设置float后会脱离正常的文档流 3.层模型(Layer) 使用position属性对元素进行定位设置 二.定位 语法:position:static(默认值)|absolute(绝对定位)|relative(相对定位)|fixed(固定定位); 1.绝对定位 语法: position:abso

从零开始学习前端开发 — 15、CSS3变形基础过渡、动画

一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 eg: transition: all 1s; ident 指定要过渡的css属性列表 eg: transition:border-radius 1s,background 2s; none 没有属性发生过渡 注:我们可以省略滑过状态或其他状态的过渡属性,但是不能省略初始状态的transition属性

从零开始学习前端开发 — 17、CSS3背景与渐变

一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景在边框及边框以内的区域可见 b) padding-box 背景在padding及padding以内的区域可见 c) content-box 背景在content区域可见 二.背景原点: background-origin:padding-box|border-box|content-box; 作用:

从零开始学习前端开发 — 16、CSS3圆角与阴影

一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border-radius:50px 5px; 左上,右下为50px,右上,左下为5px 3.设置三个值 border-radius:10px 50px 20px; 左上为10px,右上,左下为50px,右下20px 4.设置四个值 border-radius:0px 10px 30px 50px; 顺时针方向依

从零开始学习前端开发 — 3、CSS盒模型

★  盒子模型 (标准的盒模型) css盒模型的概念及组成 css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成(具体如图所示) 1.内容(content) 宽度 width:数值+单位; 高度 height:数值+单位; eg: .box{width:200px;height:100px;} 2.补白或填充 (设置内容和边框之间的距离) 语法:paddi

从零开始学习前端开发 — 7、常见浏览器兼容性问题及图片整合技术

一.常见浏览器兼容性问题 1.双倍浮动bug 描述:块状元素设置了float后,又设置了横向的margin,在IE6下显示的margin值要比设置的值大 解决方案: 给float的元素添加display:inline;将其转换为行内元素 2.表单元素行高不一致 解决方案: 方案一: 给表单元素添加 vertical-align:middle; 方案二: 给表单元素添加 float:left; 3.IE6不识别高度小于10px的容器 解决方案: 方案一: 给元素设置 overflow:hidden

从零开始学习前端开发 — 6、CSS宽高自适应

一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法:height:auto;(等同于不给元素设置高度) 三.最小高度,最大高度,最小宽度,最大宽度 1.最小高度 语法: min-height:数值+单位; 注:IE6不识别min-height属性,解决方案如下: 方案一: min-height:100px; _height:100px; 方案二: m

【repost】CSS3弹性布局

本文导读:在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理.使用CSS Flexible Box模块中定义的弹性盒布局技术,可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式,即实现非常灵活的布局处理. 弹性布局(flexible box)模块旨在提供一个更加有效的方式来布置,对齐和分布在容器之间的各项内容,即使它们的大小是未知或者动态变化的. 弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空

学习前端开发到底有没有发展?

首先,我们来看一下目前前端的市场是怎样的! 我们可以清晰的看到在3月份市场上就有近18万个前端岗位急需人才,各平台的平均薪资在10K~12K 左右. 互联网公司的前端缺口如此之大,以至于HR整天因为找不到人而焦头烂额! 那么为什么现在还有这么多前端的小伙伴抱怨说工作难找呢? 这是因为这些招人的公司所需要的是一个"靠谱的前端". 现在市场缺的都是哪种 " 靠谱的前端 " 呢? 我们先看看国内的大佬们对于前端的技能需求是什么样的. 腾讯: 美团: 从图中可以看到,现在的