css中创建主轴方向,flex-direction
flex-direction
版本:CSS3
CSS flex-direction属性指定了内部元素是如何在 flex 容器中布局的,定义了主轴的方向(正方向或反方向)。
示例/* the direction text is laid out in a line */
flex-direction: row;
/* like , but reversed */
flex-direction: row-reverse;
/* the direction in which lines of text are stacked */
flex-direction: column;
/* like , but reversed */
flex-direction: column-reverse;
/* global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;
浏览器支持
IE11以上版本的浏览器都支持flex-direction
语法flex-direction:row | row-reverse | column | column-reverse
取值row:flex容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
row-reverse:表现和row相同,但是置换了主轴起点和主轴终点。
column:flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同。
column-reverse:表现和column相同,但是置换了主轴起点和主轴终点。
说明:
该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。这将决定flex需要如何进行排列该属性的反转取值不影响元素的绘制,语音和导航顺序,只改变流动方向。这与和相同。
对应的脚本特性为flexDirection。
注意,值row和row-reverse受 flex 容器的方向性的影响。如果它的 dir 属性是 ltr,row 表示从左到右定向的水平轴,而 row-reverse 表示从右到左;如果 dir 属性是 rtl,row 表示从右到左定向的轴,而 row-reverse 表示从左到右。默认值row
适用于flex容器
继承性无
动画性visual
计算值指定值
例子
将一个容器内的子元素反转横向排列
- a
- b
- c
#box{
display: flex;
flex-direction: row-reverse;
list-style: none;
}
例子//HTML
this is a column-reverse
this is a row-reverse
//CSS
#content {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-direction: column-reverse;
display: flex;
flex-direction: column-reverse;
}
#box {
width: 50px;
height: 50px;
}
#content1 {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
}
#box1 {
width: 50px;
height: 50px;
}//HTML
//CSS
#main{
width:450px;
height:300px;
border:1px solid #ccc;
display:-webkit-flex;
display:flex;
flex-direction:row-reverse;
-webkit-flex-direction:row-reverse;
}
#main div{
width:50px;
}
效果图:
css中创建主轴方向,flex-direction相关推荐
- 在CSS中创建径向菜单
本文翻译自:Creating a Radial Menu in CSS How do I create a menu which looks like this... 如何创建一个看起来像这样的菜单. ...
- css按钮大小固定,在CSS中创建一个固定宽度的按钮
我有几个可变宽度的按钮,我希望它们都是一定的宽度.当我尝试添加width: 150px;时,它不起作用.如何创建这些全部具有设定宽度的按钮?在CSS中创建一个固定宽度的按钮 HTML Lorem Lo ...
- html图片十字形,在CSS中创建十字形
您可以使用只有伪元素的方式来实现: #cross { width: 100px; height: 100px; position: relative; } #cross:before,#cross:a ...
- html 下拉框设置名称,html下拉菜单怎么做?高手教你如何在HTML和CSS中创建下拉菜单...
html下拉菜单怎么做?html下拉菜单代码是什么?这些对于刚刚入门的新手,还不是很明白,下面高手教你如何在HTML和CSS中创建下拉菜单? 很多人都会遇到将鼠标悬停在导航上,会出现下拉菜单; 一般出 ...
- html中如何让方框有倾斜度,如何在CSS中创建带有边框的倾斜标签?
你可以尝试这种方法: jsFiddle 而不是使用边框创建倾斜效果,我使用:after伪元素来创建它.这允许我在其周围设置边框.然后我使用:before伪元素来隐藏我不想看到的边框. CSS中的循环2 ...
- 【Css\flex】css中关于弹性布局flex的综合用法(示例展示)
flex-shrink:0; 或width:0; flex-grow:0; 将子div自动伸缩取消 flex-grow;此属性为是否自动增长空间, flex-shrink;此属性为是否自动缩小空间 f ...
- css菜单下拉菜单_在CSS中创建下拉菜单
css菜单下拉菜单 CSS | 创建下拉菜单 (CSS | Creating Dropdown) Trivia: 琐事: We know the importance of navigation ba ...
- css里面的let,在css中创建类似边框效果的Droplet
使用 CSS3创建这样的效果肯定是可能的,但你需要的不仅仅是边框. 在下面的示例中,我使用了具有径向渐变背景的伪元素来模仿所示的边框效果.根据哪个边应该有边框,您可以调整伪元素的位置以实现效果. 答案 ...
- 怎么用html做出星空页面,html – 在CSS中创建星空背景
我正在使用纯代码制作太阳能系统网站,不使用任何图像.问题是我无法弄清楚如何在后台获得星星.我试图在黑色背景上得到类似黄色展开的波尔卡圆点图案.这是我的代码(为每个其他星球重复div和样式). html ...
最新文章
- 历史版本_DNF:历史版本十大经典地图,没经历过那个时代的人不会明白的
- 编译原理:实验一练习
- 爬取百度网盘资源报user is not authorized, hitcode:119
- 09_Mybatis开发Dao方法——mapper代理开发规范
- 机器学习算法基础——逻辑回归
- 21行代码AC——HDU1106 排序
- 图像颜色迁移《color transfer between images》
- 新浪微博、腾讯微博、QQ空间、人人网、豆瓣 一键分享API
- oracle sap mas,MAS 移动业务整合系统
- python运维开发项目_GitHub上值得推荐的8个python 项目
- 自学python能找到工作吗-互联网寒冬,现在开始自学python能找到工作吗?
- 对SSH三大框架的理解
- nyoj 610 定长覆盖 贪心问题系列
- 【Shiro第三篇】SpringBoot + Shiro实现用户认证(密码加密)
- 服务器拒绝mac访问共享文件,Mac共享文件连接失败怎么办?Mac无法访问打开共享文件解决方法...
- 【docker-ce】k8s集群docker容器异常重启问题分析
- BZOJ2038: [2009国家集训队]小Z的袜子(hose) 莫队算法 莫队算法讲解及时间复杂度证明
- 怎么让照片变年轻_PS高手让你变得更年轻
- 接入支付宝电脑网站支付实现JAVA版
- 【AIGC使用教程】Microsoft Edge/Bing Chat 注册使用完全指南
热门文章
- Bia布刷题日记 2022/2/16
- 【MySQL】数据库机房架构与跨城容灾详解(实战篇)(MySQL专栏启动)
- Prolific USB-to-Serial Comm Port最新程序不支持win11怎么处理
- java 包 重名,Java-java 包重名的问题如何解决?
- 美团——大众测试开发工程师校招
- 注册表关闭命令提示符_如何从命令提示符下编辑Windows注册表
- smba简单设置共享
- Android平台抓包工具TCPDump
- python自制个人网盘_超简单!基于Python搭建个人“云盘”
- 阿里云使用体验-阿里云开发者社区