css 上下布局 flex,Css Flex布局
Flex布局是Css3中新加入的额外布局系统。
传统布局基于盒模型,依赖“display”、“position”、“float”属性,对于特殊布局非常不便。
因此2009年,W3C提出新的布局方案-Flex布局,但由于浏览器兼容问题,Flex布局并没有大范围铺开。
实现Flex布局的条件
1.必须有一个父级容器作为Flex容器(作为容器)
·定义一个Flex容器
.box{ display: flex; }
2.Flex容器内必须有子元素进行配合(作为项目)
项目内也可设置属性进行布局。
补充:
行内元素也可以使用Flex布局
.box{ display: inline-flex; }
webkit内核的浏览器,必须加上weibkit前缀
.box{ display: -webkit-flex; /* Safari */ display: flex; }
设成Flex后,子元素的float、clear和vertical-align属性将失效。
作用于容器的属性
flex-direction
决定主轴的方向(即项目的排列方向)
.container { flex-direction: row | row-reverse | column | column-reverse; }
它包含4个值
1.row默认值,水平从左到右
2.row-reverse,水平从右到左
3.column,垂直从上到下
4.column-reverse,垂直从下到上
flex-direction
flex-wrap
默认情况下,项目都排在一条轴线上,flex-wrap属性定义,如果一条轴线排不下,如何换行。
.container{ flex-wrap: nowrap | wrap | wrap-reverse; }
它包含3个值
1.nowrap(默认):不换行。
2.wrap:换行,第一行在上方。
3.wrap-reverse:换行,第一行在下方。
flex-wrap
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
flex-flow: ||
justify-content
设置项目在主轴上的对齐方式
.container { justify-content: flex-start | flex-end | center | space-between | space-around; }
它包含5个值
1.flex-start(默认值):左对齐
2.flex-end:右对齐
3.center: 居中
4.space-between:两端对齐,项目之间的间隔都相等。
5.space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
justify-content
align-items
规定项目在交叉轴上的对齐方式
.container { align-items: flex-start | flex-end | center | baseline | stretch; }
它包含5个值
1.flex-start:交叉轴的起点对齐。
2.flex-end:交叉轴的终点对齐。
3.center:交叉轴的中点对齐。
4.baseline: 项目的第一行文字的基线对齐。
5.stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-items
align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
它包含6个值
1.flex-start:与交叉轴的起点对齐。
2.flex-end:与交叉轴的终点对齐。
3.center:与交叉轴的中点对齐。
4.space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
5.space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
6.stretch(默认值):轴线占满整个交叉轴。
align-content
作用于项目的属性
order属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。在默认情况下flex order会按照书写顺训呈现,可以通过order属性改变,数值小的在前面,还可以是负数。
.item { order: ; }
默认是0,切记切记。
order
flex-grow属性
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
.item { flex-grow: ; /* default 0 */ }
flex-grow
flex-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item { flex-shrink: ; /* default 1 */ }
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。
*flex-basis
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
*flex
flex-grow, flex-shrink,flex-basis 的缩写
.item { flex: none | [ ? || ] }
*align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
Paste_Image.png
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
css 上下布局 flex,Css Flex布局相关推荐
- flex 单独一行_Flex网页布局一CSS弹性伸缩盒子语法教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- css flex布局 padding,CSS3 flex布局之快速实现BorderLayout布局
学习完flex的布局模式之后,我们趁热打铁,来实现一个BoxLayout布局.什么是BoxLayout布局?那我们先上一个图看看 BoxLayout布局写过后端UI代码的编程者应该不陌生了,写前端的代 ...
- flex.css快速入门,极速布局
什么是flex.css? css3 flex 布局相信很多人已经听说过甚至已经在开发中使用过它,但是我想我们都会有一个共同的经历,面对它的各种版本,各种坑,傻傻的分不清楚,flex.css就是对fle ...
- css和css的圣杯布局,CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局
前言 我曾一度觉得总写css的前端很low,有了这种思想以后我便远离网页布局,H5的工作更不想接,沉迷于页面逻辑和封装组件.直到最近我面试,面试官说我css3理解的不熟,我起初很不屑,但后来静下来反省 ...
- 网页HTML5制作flex布局骰子,css利用flex布局画骰子的六个面
主要是利用flex的一些特性来写的,掌握好flex基础,写出筛子的几个页面不是问题. 推荐去我写的一个博客中有flex的小练习 线上练习flex布局 html css .shaizi { width: ...
- html 布局 flex,CSS flex布局
任何一个容器都可以指定为Flex布局. .box{ display: flex; } 行内元素也可以使用flex布局 .box{ display: inline-flex; } webkit内核的浏览 ...
- css日积月累系列---简易的flex布局使用sass和less 封装版
本文只是作日积月累的css 样式使用随着实际应用的开发,会越来越大 ,本css只是针对日常用到的.less 语法封装,适用antdesign- UI 后台管理系统开发 .font(@i) when(@ ...
- flex组合流动布局实例---利用css的order属性改变盒子排列顺序
flex弹性盒子 <div class="container"><div class="box yellow"></div> ...
- css专业名词,CSS进阶系列一(flex布局基础知识——介绍、规范、主要思想、专业术语)...
一.介绍 flex是flexible box的缩写,意为弹性布局.flexible box是CSS3新增加的,用来为盒模型提供最大的灵活性.flex旨在提供一个更加有效的方式来布置,对齐和分布在容器之 ...
- css flex布局 padding,css三栏布局的三种实现方式(圣杯布局、双飞翼布局、Flex布局)...
本篇文章给大家带来的内容是关于LNMP以源码的方式记录环境搭建的过程(详细),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果图: 圣杯布局 圣杯 .container{ padd ...
最新文章
- 2021年大数据ELK(十八):Beats 简单介绍和FileBeat工作原理
- MFC第三节-多线程
- 基于Clang的缓存型C++编译器Zapcc开源
- c语言不会可以学好java吗_C语言一定要学好吗?
- 最新发布丨游戏市场“超预期”增长背景下,如何加速产品精品化 运营精细化?
- 节前福利 | 三位大佬带你从客户成功、销售、市场端打造 To B 运作体系 !
- android 去空字符串,android – TextUtils.isEmpty()方法为空字符串返回false
- 2020 云原生 7 大趋势预测
- 【slighttpd】基于lighttpd架构的Server项目实战(3)—MasterWorker模式
- Android NDK开发: 通过C/C++调用第三方so库
- 【Spark篇】---SparkStreaming算子操作transform和updateStateByKey
- 火狐浏览器安装java插件下载_如何在 Firefox 浏览器安装 java 插件
- 基于高频18000-3M3技术的RFID智能书架方案
- 程序员必会10种算法
- 全面赋能,OCR文字识别2022年多场景落地应用
- Linux云计算工程师路线
- 金山打字专业文章计算机,文字录入(排版完成)_计算机软件及应用_IT计算机_专业资料...
- 如何用tushare复盘
- proteus常用元件图示和名称介绍
- stl排序之sort函数
热门文章
- swift python混合开发_引用swift项目
- 如何给dcoker容器里的alpine系统安装中文字体
- [论文翻译]Topology-Aware Correlations Between Relations for Inductive Link Predictionin Knowledge Graphs
- Eclipse Git配置
- 标准化拉普拉斯矩阵特征值范围为什么小于等于2?(证明)
- 鞘氨醇-1-磷酸的生物学作用
- 合肥工业大学 慕课 梦溪笔谈 习题答案
- 亚稳态的有关概念和分析
- C语言入门教程学习 C语言学习包括哪些?
- 免费录屏软件之OBS Studio