CSS flex 布局 一些基本属性应用
作用于伸缩盒元素上的属性
box-orient 、box-pack、box-align、box-direction、box-lines
box-orient
box-orient:horizontal | vertical | inline-axis | block-axis默认值:horizontal适用于:伸缩盒容器继承性:无动画性:否计算值:指定值
box-pack
box-pack:start | center | end | justify默认值:start适用于:伸缩盒容器继承性:无动画性:否计算值:指定值取值:start:设置伸缩盒对象的子元素从开始位置对齐(大部分情况等同于左对齐,受)center:设置伸缩盒对象的子元素居中对齐end:设置伸缩盒对象的子元素从结束位置对齐(大部分情况等同于右对齐)justify:设置或伸缩盒对象的子元素两端对齐
box-algin
box-align:start | end | center | baseline | stretch默认值:stretch适用于:伸缩盒容器继承性:无动画性:否计算值:指定值取值:start:设置伸缩盒对象的子元素从开始位置对齐center:设置伸缩盒对象的子元素居中对齐end:设置伸缩盒对象的子元素从结束位置对齐baseline:设置伸缩盒对象的子元素基线对齐stretch:设置伸缩盒对象的子元素自适应父元素尺寸说明:设置或检索伸缩盒对象的子元素的对齐方式。查看其兄弟属性box-pack,两者的效果正好(相反)互补效果等同于过渡版本的flex-align属性和新版本的align-items属性;box-align的对齐方式受box-orient影响;默认情况下(即box-orient设置为horizontal)start和end所呈现的效果等同于顶部对齐和底部对齐;当box-orient设置为vertical时,start和end所呈现的效果等同于左对齐和右对齐;对应的脚本特性为boxAlign。
box-direction
box-direction:normal | reverse默认值:normal适用于:伸缩盒容器继承性:无动画性:否计算值:指定值取值:normal:设置伸缩盒对象的子元素按正常顺序排列reverse:反转伸缩盒对象的子元素的排列顺序说明:设置或检索伸缩盒对象的子元素的排列顺序是否反转。可以通过box-orient:horizontal + box-direction:normal 达到新版本 flex-direction:row 的效果;可以通过box-orient:horizontal + box-direction:reverse 达到新版本 flex-direction:row-reverse 的效果;可以通过box-orient:vertical + box-direction:normal 达到新版本 flex-direction:column 的效果;可以通过box-orient:horizontal + box-direction:reverse 达到新版本 flex-direction:column-reverse 的效果;Firefox设置box-direction为reverse时,在将元素的排列顺序反转的同时也将元素的对齐方式逆转了;Safari和Chrome则只是反转元素排列顺序对应的脚本特性为boxDirection。
box-lines :主要决定子元素是否允许换行
box-lines:single | multiple默认值:single适用于:伸缩盒容器继承性:无动画性:否计算值:指定值取值:single:伸缩盒对象的子元素只在一行内显示multiple:伸缩盒对象的子元素超出父元素的空间时换行显示说明:设置或检索伸缩盒对象的子元素是否可以换行显示。效果类似于过渡版本和新版本的flex-wrap属性;对应的脚本特性为boxLines。
作用于子元素上:box-ordinal-group 、 box-flex-group
box-ordinal-group
box-flex-group:默认值:1适用于:伸缩盒子元素继承性:无动画性:否计算值:指定值取值::用整数值来定义伸缩盒对象的子元素所在的组。说明:设置或检索伸缩盒对象的子元素的所属组。动态给数值较大的组分配其内容所需的实际空间(如无内容、padding、border则不占空间),剩余空间则均分给数值最小的那个组(可能有1个或多个元素)对应的脚本特性为boxFlexGroup。
box-ordinal-group
box-ordinal-group:默认值:1适用于:伸缩盒子元素继承性:无动画性:否计算值:指定值取值::用整数值来定义伸缩盒对象的子元素显示顺序。说明:设置或检索伸缩盒对象的子元素的显示顺序。效果等同于过渡版本的flex-order属性和新版本的order属性;数值较低的元素显示在数值较高的元素前面;相同数值的元素,它们的显示顺序取决于它们的代码顺序;对应的脚本特性为boxOrdinalGroup。
转载于:https://www.cnblogs.com/czhyuwj/p/5775133.html
CSS flex 布局 一些基本属性应用相关推荐
- css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言 之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
- [css] flex布局的缺点有哪些?(除兼容性外)
[css] flex布局的缺点有哪些?(除兼容性外) 无法直接定义列数(要使用百分比的方式实现) 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目 ...
- html实现 左图右文_让CSS flex布局最后一行左对齐的N种方法
作者:张鑫旭 https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ 前言 小伙伴们是否还记得,之前小编也发布了几篇关于CS ...
- css flex布局 模型(CSS justify-content 属性) - 代码案例
css flex布局 模型(CSS justify-content 属性) - 代码案例 效果图: . 代码如下: .father{display: -webkit-box;display: -ms- ...
- html flex自动换行,css flex布局超长自动换行的示例代码
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...
- CSS flex布局
1. 介绍 1.1 说明 flex布局,也称为flex弹性布局:主要目的是使item的宽度.高度按一定顺序填充父容器的可用空间. 示例 注意:在下文中,将以parent指代父容器,item指代容器内的 ...
- css flex布局
关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"><div class=" ...
- html 布局 flex,CSS flex布局
任何一个容器都可以指定为Flex布局. .box{ display: flex; } 行内元素也可以使用flex布局 .box{ display: inline-flex; } webkit内核的浏览 ...
- W3C推荐的新布局模式 【CSS Flex布局】详解
本文目录 概述 属性 弹性容器的属性(父级) display flex-direction flex-wrap flex-flow justify-content align-items align- ...
- html+css+flex布局制作个人简历
知识点: HTML,CSS,Flex弹性布局. 重点: Flex弹性布局,sticky定位. 目录: 图片自备 源码 index.html <!DOCTYPE html> <html ...
最新文章
- “官之道”与“商之道”
- hadoop题目(一)
- python access 源码_连接的微软Access数据库,这是一个轻量级的Python模块(MDB格式)...
- 整理的3500个常用汉字的调用字典
- [Ext JS]treelist实现tooltip
- e search index.php,php操作elastcisearch使用ik分词做搜索,搜索结果总为空
- 汇编取值运算符OFFSET,SEG,LEA和属性运算符PTR
- SpringBoot2.x炫酷吊炸天前后端分离的后台管理系统实例
- MySQL重做日志(redo log)总结
- android高通camera驱动调试,高通Camera模块驱动指南资料
- 机器学习笔记--模型评估之一:准确率与召回率,平均根误差(RMSE、平均绝对百分比误差(MAPE)
- python battleship_Python 入门教程 12 ---- Battleship!-阿里云开发者社区
- 实时可视化大数据项目01 -- 项目介绍
- A type incompatibility occurred while executing org.springframework.boot:spring-boot-maven-plugin:2.
- Ubuntu使用sudo apt-get upgrade升级软件出现问题后的处理
- 圣天诺(LDK)加密锁 云授权,不用使用硬件的加密锁(加密狗)
- 推荐下载Adobe Reader(PDF阅读器)9.0 简体中文版
- vue2.0+ axios如何读取本地json文件的数据
- android 变windows7,安卓手机变电脑(iDisplay) v3.1.0 英文安装版 Win7/WinXP
- APP安全之SQL注入之什么是SQL注入(一)
热门文章
- [Remoting]在.NET環境實作Flex 3 Remoting - (2) Flex Builder 環境設定
- Windows Live Write:主流BSP的支持情况
- 【进阶】PyTorch自定义CUDA算子教程与运行时间分析
- python3中filter、map、reduce、apply、zip函数用法总结
- 数据挖掘相关代码实践
- React与前端:React家族介绍
- Spark:超越Hadoop MapReduce
- 办公利器:IBM Lotus Symphony轻松之旅
- 9位工作流业内专家联袂推荐
- 博文视点大讲堂第12期、第13期讲座文件下载