弹性布局的属性及使用
在平时的我们常用的布局类型有以下几种:
1.浮动+定位
2.自适应(百分比)
3.响应式布局
4.弹性布局(Flex布局)
优点:兼容性支持所有浏览器(Webkit内核的浏览器,要加上-webkit-
),可以随用户的喜好进行调节,可以将任何一个容器指定为Flex布局。
缺点:因为弹性布局可调节,所以有巨大的可能性,需要花很多的时间进行调整;有些弹性设计要为IE6单独设计样式。
注意:当我们使用了弹性布局,那么在CSS里的float、clear和vertical-align就会失效。
1.flex-direction属性
flex-direction决定了容器的方向。
四个值分别为:row(默认值)从左向右、row-reverse从右向左、column从上到下、column-reverse从下到上。
2.flex-wrap属性
默认情况下的布局一般在同一行,当设置了flex-wrap属性之后将自动将排列不下的内容进行换行。
四个值分别为:nowrap(默认值)不换行、wrap向下换行、wrap-reverse向上换行。
3.flex-flow属性
flex-flow属性是以上两种属性的简写形式,默认值是row nowrap。
4.justify-content属性
justify-content属性定义了在容器方向上的对齐方式。
flex-start(
默认值):向左对齐。
flex-end
:向右对齐。
center
: 居中对齐。
space-between
:两端对齐,每一个子元素等距离间隔,子元素与容器边框无间隔。
space-around
:每个子元素两侧的间隔相等。子元素之间的间隔比子元素与容器边框的间隔大一倍。
5.align-items属性
align-items属性定义在垂直容器方向上的对齐方式。
flex-start
:垂直方向的起点对齐。
flex-end
:垂直方向的终点对齐。
center
:垂直方向的中点对齐。
baseline
: 与第一个子元素中文字的基线对齐。
stretch(
默认值):如果子元素没有设置高度或者高度设为auto,那么它将占满整个容器的高度。
6.align-content属性
align-content属性定义了子元素两种方向上的对齐方式。
flex-start
:当容器方向子元素刚好填满时,与垂直方向的起点对齐。
flex-end
:当容器方向子元素刚好填满时,与垂直方向的终点对齐。
center
:当容器方向子元素刚好填满时,与垂直方向的中点对齐。
space-between
:当容器方向子元素刚好填满时,垂直方向两端对齐,子元素之间的等距离间隔。
space-around
:两个方向两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch
(默认值):占满整个垂直方向。
下面就是具有弹性布局容器中子元素的属性
1.order属性
order属性定义了子元素的排列顺序,数值小的在前。
2.flex-grow属性
flex-grow属性定义了子元素的放大比例,默认值为0。
当给所有子元素设置该属性为1,那么将等分所有空间,如果单独给某一个子元素设置n倍,那么该子元素将占据的空间比其他子元素多n倍。
3.flex-shrink属性
flex-shrink属性定义了子元素的缩小比例,默认值为1。
给所有子元素设置该属性为1,当空间不足时那么所有子元素将等比例缩小平分所有空间,如果单独给某一个子元素设置0,那么该子元素将在空间不足时不缩小。
4.flex-basis属性
该属性定义了给子元素分配空间时其占据的空间为多少,可以设置为与其width和height属性一样的值,那么它将被分配固定的空间大小。
5.flex属性
该属性为flex-grow
, flex-shrink
和 flex-basis
的简写。
6.align-self属性
该属性允许设置过的子元素有与其他子元素不一样的对齐方式,可以覆盖align-items属性。
auto:默认值,表示默认继承父级的align-items属性。
flex-start
:垂直方向的起点对齐。
flex-end
:垂直方向的终点对齐。
center
:垂直方向的中点对齐。
baseline
: 与第一个子元素中文字的基线对齐。
stretch(
默认值):如果子元素没有设置高度或者高度设为auto,那么它将占满整个容器的高度。
部分实列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.flex-container {display: -webkit-flex;display: flex;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;
}
</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>
</html>
CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性布局的属性及使用相关推荐
- 前端css弹性布局各种属性
前端css弹性布局各种属性 一.基本概念 Flexbox 是 flexible box 的简称(注:意思是"灵活的盒子容器")又叫弹性布局,是 CSS3 引入的新的布局模式.它决定 ...
- flex弹性布局常用属性
1,flex是一维布局,开启flex布局后,里面所有的元素将被称作item(项目) 1,当给父盒子设为弹性布局后,子元素float,clear和vercital-align属性将失效 3,主要通过给父 ...
- CSS弹性布局 Flex属性
flex是Flexible Box的缩写,就是弹性盒子布局的意思 通过flex我们可以解决元素居中问题,自动弹性伸缩,适配不同大小的屏幕和移动端. Flex布局简介 序号 简记 术语 1 二成员 容器 ...
- 弹性布局flex属性详解
注意:如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用. flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间. flex 属性是 flex-grow.flex-shrink ...
- 弹性布局的justify-content属性
现在我来谈谈我对弹性布局中的justify-content的了解,justify-content是弹性布局的属性,写它之前一定要写上display:flex,这是弹性布局的写法而且要写在同一个类中,下 ...
- php响应式布局,响应式布局之弹性布局的介绍
响应式布局的实现是前端工程中一个非常大的跨越,它非常灵活的可塑造性使得同一个网站能在不同的终端设备上展现出不同的活力.就今天这个机会,我想与大家分享并探讨一些常用来实现响应式布局方法中的弹性布局. 弹 ...
- CCS3的过渡、变换、动画以及响应式布局、弹性布局
CSS3 过渡 .变换.动画 在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...
- 微信小程序开发(三)——IE盒子,Flex弹性布局,色子六面
目录 ie盒子模型 Flex弹性布局 三大特性: 块元素和内联元素的转换 background-image背景图片 尺寸单位rpx 定位 练习:色子的六面 ie盒子模型 盒子模型是css中一个重要的概 ...
- css基础--弹性布局
一.什么是弹性布局 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. 二.基本概念 采用Flex ...
最新文章
- 傅里叶变换之看不懂就掐死我教程
- 机器人流程自动化技术的新发展
- Netty入门系列(1) --使用Netty搭建服务端和客户端
- 淘宝评价网----类反淘宝联盟上线
- 纯API函数实现串口读写。
- Java中成员变量、局部变量和静态变量的区别
- python game编写后为什么是一闪而过_《Python编程初学者指南》——1.6 回到Game Over程序...
- Json对象(数组)与Java对象(集合)的相互转换
- 坚持每一天,不忘初心,正经的前端学习(705)
- 数学建模-TOPSIS法
- vue引入jsmind(右键菜单)
- 我是如何自学成为程序员的
- Verilog语法【参数化设计(parameter 和defparam)】
- Ghelper安装及使用
- 冒泡法java程序图片_正宗冒泡法-java语言实现
- CMMI认证是什么?有哪些等级?价值体现在哪里?
- ORACLE修改processes和sessions参数
- oracle安装使用
- 风铃机器码修改器2.2单进程单ID硬件信息用于解除机器码硬件修改大师多开器部分游戏
- 昆明世博园装mysql_昆明世博园太美丽了
热门文章
- 基于asp.net网上选课系统设计
- 苦瓜红烧肉这么做,每次做连汤汁都不剩
- python仪表盘绘图_Python制作仪表盘图,比Excel快速N倍
- Spatio-Temporal Graph Convolutional Networks: A Deep Learning Framework for Traffic
- 将谓语动词插在主语之后 指针和数组两种方法实现
- X2000 halley5开发板,buildroot编译image
- 量化分析师的Python日记【Q Quant兵器谱之函数插值】
- npm 安装 node-sass 失败问题分析及解决方案
- 所有过往、皆为序章:我的2021
- 单位及主管部门同意报考证明单位不同意怎么办