弹性盒子 flex-direction

　　使用弹性盒子可以更方便的对页面内容进行布局

　　flex-direction指定了子元素在父元素盒子中的排列方式

　　1.flex-direction:row

　　　　flex默认排列方式，从左到右排列，左对齐

　　2.flex-direction：row-reverse

　　　　与row反向，从右向左排列，右对齐，第一个在最右边

　　3.flex-direction：column

　　　　从上到下依次排列，向上对齐

　　4.flex-direction：column-reverse

　　　　与column相反，从下到上对齐，第一个在最下面

　　说明：HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flex</title><link rel="stylesheet" href="flex.css">
</head>
<body><div id="content"><div>div1</div><div>div2</div><div>div3</div></div>
</body>
</html>

　　　　row：

#content
{width: 500px;height: 500px;background: #0395e1;display: flex;flex-direction: row;
}
#content>div
{width: 100px;height: 100px;margin: 10px;background: #e53935;
}

　　　　样式：

　　　　row-reverse：

#content
{width: 500px;height: 500px;background: #0395e1;display: flex;flex-direction: row-reverse;
}
#content>div
{width: 100px;height: 100px;margin: 10px;background: #e53935;
}

　　　　样式：

　　　　column：

#content
{width: 500px;height: 500px;background: #0395e1;display: flex;flex-direction:column;
}
#content>div
{width: 100px;height: 100px;margin: 10px;background: #e53935;
}

　　　　样式：

　　　　column-reverse：

#content
{width: 500px;height: 500px;background: #0395e1;display: flex;flex-direction:column-reverse;
}
#content>div
{width: 100px;height: 100px;margin: 10px;background: #e53935;
}

　　　　样式：

转载于:https://www.cnblogs.com/zhangcheng001/p/10948985.html

弹性盒子 flex-direction相关推荐

CSS3弹性盒子Flex
CSS3弹性盒子Flex 基础知识和术语原文链接:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 父级(flex容器)的属性 #显示 ...
弹性盒子flex布局实现骰子六个面并让骰子3D空间旋转
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
css 弹性盒子 flex布局
目录 css弹性盒子flex 布局什么是flex 常见父项属性概念与案例主轴与侧轴 flex-direction设置主轴的方向 justify-content 设置主轴上的子元素排列方式 fle ...
html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
简述弹性盒子flex布局及rem布局
简述弹性盒子flex布局及rem布局 flex布局方式采用flex布局的元素,成为flex为容器,所有的子元素,都包含在容器内,容器存在两个默认的轴水平主轴主轴的开始位置(与边框的交叉点)叫做m ...
弹性盒子flex轴的说明
弹性盒子flex中,有两种轴一种是主轴,一种是交叉轴(侧轴). flex默认轴布局是这样的: flex-direction 是决定主轴的方向 row 从左到右水平排列元素(默认值)如上图 row-r ...
弹性盒子 Flex 子元素高度塌陷
弹性盒子 Flex 子元素高度塌陷数据来源:https://blog.csdn.net/sinat_36539161/article/details/81663971 先看看页面整体布局: · wr ...
CSS3 弹性盒子(Flex Box)
目录 CSS3 弹性盒子(Flex Box) 一.什么是 Flexbox >>> 了解两个基本概念,接下来会频繁提到: >>> 了解两个基本方向,这个牵扯到弹性布局 ...
认识弹性盒子flex
认识弹性盒子flex 来源:https://blog.xybin.top/2022/flex 1.定义弹性布局(父级上定义)display:flex; 如果说内核为webkit 的必须前面加上 -we ...
ul弹性怎么一行显示_css3系列之弹性盒子 flex
作者:杨耿 https://www.cnblogs.com/yanggeng/p/11212526.html 弹性盒子(伸缩盒) 注意,本篇会很长,非常长, 因为弹性盒子的知识点比较多搜索弹性盒子 ...

弹性盒子 flex-direction

弹性盒子 flex-direction相关推荐

最新文章

热门文章