作用于伸缩盒元素上的属性

box-orient 、box-pack、box-align、box-direction、box-lines

box-orient

    box-orient:horizontal | vertical | inline-axis | block-axis默认值:horizontal适用于:伸缩盒容器继承性:无动画性:否计算值:指定值
horizontal
vertical
inline-axis
block-axis

box-pack

    box-pack:start | center | end | justify默认值:start适用于:伸缩盒容器继承性:无动画性:否计算值:指定值取值:start:设置伸缩盒对象的子元素从开始位置对齐(大部分情况等同于左对齐,受)center:设置伸缩盒对象的子元素居中对齐end:设置伸缩盒对象的子元素从结束位置对齐(大部分情况等同于右对齐)justify:设置或伸缩盒对象的子元素两端对齐
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。
stretch
start
center
end
baseline

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。
normal
reverse

box-lines :主要决定子元素是否允许换行

    box-lines:single | multiple默认值:single适用于:伸缩盒容器继承性:无动画性:否计算值:指定值取值:single:伸缩盒对象的子元素只在一行内显示multiple:伸缩盒对象的子元素超出父元素的空间时换行显示说明:设置或检索伸缩盒对象的子元素是否可以换行显示。效果类似于过渡版本和新版本的flex-wrap属性;对应的脚本特性为boxLines。
single
multiple

作用于子元素上: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。

1
2
3

转载于:https://www.cnblogs.com/czhyuwj/p/5775133.html

CSS flex 布局 一些基本属性应用相关推荐

  1. css布局方式_手把手教你CSS Flex布局「真香」

    作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言   之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...

  2. [css] flex布局的缺点有哪些?(除兼容性外)

    [css] flex布局的缺点有哪些?(除兼容性外) 无法直接定义列数(要使用百分比的方式实现) 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目 ...

  3. html实现 左图右文_让CSS flex布局最后一行左对齐的N种方法

    作者:张鑫旭 https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ 前言 小伙伴们是否还记得,之前小编也发布了几篇关于CS ...

  4. css flex布局 模型(CSS justify-content 属性) - 代码案例

    css flex布局 模型(CSS justify-content 属性) - 代码案例 效果图: . 代码如下: .father{display: -webkit-box;display: -ms- ...

  5. html flex自动换行,css flex布局超长自动换行的示例代码

    要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...

  6. CSS flex布局

    1. 介绍 1.1 说明 flex布局,也称为flex弹性布局:主要目的是使item的宽度.高度按一定顺序填充父容器的可用空间. 示例 注意:在下文中,将以parent指代父容器,item指代容器内的 ...

  7. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"><div class=" ...

  8. html 布局 flex,CSS flex布局

    任何一个容器都可以指定为Flex布局. .box{ display: flex; } 行内元素也可以使用flex布局 .box{ display: inline-flex; } webkit内核的浏览 ...

  9. W3C推荐的新布局模式 【CSS Flex布局】详解

    本文目录 概述 属性 弹性容器的属性(父级) display flex-direction flex-wrap flex-flow justify-content align-items align- ...

  10. html+css+flex布局制作个人简历

    知识点: HTML,CSS,Flex弹性布局. 重点: Flex弹性布局,sticky定位. 目录: 图片自备 源码 index.html <!DOCTYPE html> <html ...

最新文章

  1. “官之道”与“商之道”
  2. hadoop题目(一)
  3. python access 源码_连接的微软Access数据库,这是一个轻量级的Python模块(MDB格式)...
  4. 整理的3500个常用汉字的调用字典
  5. [Ext JS]treelist实现tooltip
  6. e search index.php,php操作elastcisearch使用ik分词做搜索,搜索结果总为空
  7. 汇编取值运算符OFFSET,SEG,LEA和属性运算符PTR
  8. SpringBoot2.x炫酷吊炸天前后端分离的后台管理系统实例
  9. MySQL重做日志(redo log)总结
  10. android高通camera驱动调试,高通Camera模块驱动指南资料
  11. 机器学习笔记--模型评估之一:准确率与召回率,平均根误差(RMSE、平均绝对百分比误差(MAPE)
  12. python battleship_Python 入门教程 12 ---- Battleship!-阿里云开发者社区
  13. 实时可视化大数据项目01 -- 项目介绍
  14. A type incompatibility occurred while executing org.springframework.boot:spring-boot-maven-plugin:2.
  15. Ubuntu使用sudo apt-get upgrade升级软件出现问题后的处理
  16. 圣天诺(LDK)加密锁 云授权,不用使用硬件的加密锁(加密狗)
  17. 推荐下载Adobe Reader(PDF阅读器)9.0 简体中文版
  18. vue2.0+ axios如何读取本地json文件的数据
  19. android 变windows7,安卓手机变电脑(iDisplay) v3.1.0 英文安装版 Win7/WinXP
  20. APP安全之SQL注入之什么是SQL注入(一)

热门文章

  1. [Remoting]在.NET環境實作Flex 3 Remoting - (2) Flex Builder 環境設定
  2. Windows Live Write:主流BSP的支持情况
  3. 【进阶】PyTorch自定义CUDA算子教程与运行时间分析
  4. python3中filter、map、reduce、apply、zip函数用法总结
  5. 数据挖掘相关代码实践
  6. React与前端:React家族介绍
  7. Spark:超越Hadoop MapReduce
  8. 办公利器:IBM Lotus Symphony轻松之旅
  9. 9位工作流业内专家联袂推荐
  10. 博文视点大讲堂第12期、第13期讲座文件下载