Flex布局（一）flex-direction

采用Flex布局的元素，被称为Flex容器(flex container)，简称"容器"。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称"项目"

Flex-direction调整主轴方向（默认为水平方向）包括row、column、row-reverse、column-reverse

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>CSS3伸缩布局</title>
  6.    <style>
  7.       body {
  8.          margin: 0;
  9.          padding: 0;
  10.          font-family: '微软雅黑';
  11.          background-color: #F7F7F7;
  12.       }
  14.       ul {
  15.          margin: 0;
  16.          padding: 0;
  17.          list-style: none;
  18.       }
  20.       .wrapper {
  21.          width: 1024px;
  22.          margin: 0 auto;
  23.       }
  25.       .wrapper > section {
  26.          min-height: 300px;
  27.          margin-bottom: 30px;
  28.          box-shadow: 1px 1px 4px #DDD;
  29.          background-color: #FFF;
  30.       }
  32.       .wrapper > header {
  33.          text-align: center;
  34.          line-height: 1;
  35.          padding: 20px;
  36.          margin-bottom: 10px;
  37.          font-size: 30px;
  38.       }
  40.       .wrapper section > header {
  41.          line-height: 1;
  42.          padding: 10px;
  43.          font-size: 22px;
  44.          color: #333;
  45.          background-color: #EEE;
  46.       }
  48.       .wrapper .wrap-box {
  49.          padding: 20px;
  50.       }
  52.       .wrapper .brief {
  53.          min-height: auto;
  54.       }
  56.       .wrapper .flex-img {
  57.          width: 100%;
  58.       }
  60.       /*全局设置*/
  61.       section ul {
  62.          display: flex;
  63.       }
  65.       section li {
  66.          width: 200px;
  67.          height: 200px;
  68.          text-align: center;
  69.          line-height: 200px;
  70.          margin: 10px;
  71.          background-color: pink;
  72.       }
  74.       /*垂直方向*/
  75.       section:nth-child(2) ul {
  76.          display: flex;
  77.       }
  79.       .column ul {
  80.          flex-direction: column;
  81.       }
  83.       .row-reverse ul {
  84.          flex-direction: row-reverse;
  85.       }
  87.       .column-reverse ul {
  88.          flex-direction: column-reverse;
  89.       }
  91.       /*1、指定一个盒子为伸缩盒子 display: flex*/
  93.       /*2、设置属性来调整此盒的子元素的布局方式 例如 flex-direction*/
  95.       /*3、明确方向*/
  97.       /*4、它可互换主侧轴，也可改变方向*/
  99.    </style>
  100. </head>
  101. <body>
  102.    <div class="wrapper">
  103.       <header>CSS3-伸缩布局详解</header>
  104.       <!-- 简介 -->
  105.       <section class="brief">
  106.          <header>flex-direction</header>
  107.          <div class="wrap-box">
  108.             <p>调整主轴方向（默认为水平方向）包括row、column、row-reverse、column-reverse</p>
  109.          </div>
  110.       </section>
  111.       <!-- 分隔线 -->
  112.       <section>
  113.          <header>flex-direction</header>
  114.          <div class="wrap-box">
  115.             <p>调整主轴方向（默认为水平方向）</p>
  116.             <ul>
  117.                <li>1</li>
  118.                <li>2</li>
  119.                <li>3</li>
  120.             </ul>
  121.          </div>
  122.       </section>
  123.       <section class="column">
  124.          <header>column</header>
  125.          <div class="wrap-box">
  126.             <p>调整主轴方向（默认为水平方向）</p>
  127.             <ul>
  128.                <li>1</li>
  129.                <li>2</li>
  130.                <li>3</li>
  131.             </ul>
  132.          </div>
  133.       </section>
  134.       <section class="row-reverse">
  135.          <header>row-reverse</header>
  136.          <div class="wrap-box">
  137.             <p>调整主轴方向（默认为水平方向）</p>
  138.             <ul>
  139.                <li>1</li>
  140.                <li>2</li>
  141.                <li>3</li>
  142.             </ul>
  143.          </div>
  144.       </section>
  145.       <section class="column-reverse">
  146.          <header>column-reverse</header>
  147.          <div class="wrap-box">
  148.             <p>调整主轴方向（默认为水平方向）</p>
  149.             <ul>
  150.                <li>1</li>
  151.                <li>2</li>
  152.                <li>3</li>
  153.             </ul>
  154.          </div>
  155.       </section>
  156.    </div>
  157. </body>
  158. </html>

本文转载于:猿2048➬https://www.mk2048.com/blog/blog.php?id=hhc2bkhj&title=Flex布局（一）flex-direction

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/370255.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

登录网页后要弹出一个新标签_连永久链接都不会，还做什么新媒体？

登录网页后要弹出一个新标签_连永久链接都不会，还做什么新媒体？

上次给主编大大发的预览链接失效了&#xff0c;被骂得狗血淋头。大部分运营人可能都遇到过这种情况&#xff0c;忽视了预览生成的链接只是临时的&#xff0c;在12小时后或超过500阅读量后就会失效。一个疏忽&#xff0c;给自己带来了不必要的麻烦&#xff0c;耽误工作&#xff…
阅读更多...
static_cast与dynamic_cast转换

static_cast与dynamic_cast转换

static_cast与dynamic_cast转换　　 一 C语言中存在着两种类型转换&#xff1a; 隐式转换和显式转换 隐式转换&#xff1a;不同数据类型之间赋值和运算&#xff0c;函数调用传递参数……编译器完成 char ch;int i ch; 显示转换&#xff1a;在类型前增加 &#xff1a;&#xff…
阅读更多...
vue使用iview Timeline 时间轴不显示问题

vue使用iview Timeline 时间轴不显示问题

vue Timeline 时间轴不显示渲染的效果 官网代码 <Timeline pending><TimelineItem>发布1.0版本</TimelineItem><TimelineItem>发布2.0版本</TimelineItem><TimelineItem>发布3.0版本</TimelineItem><TimelineItem><a href…
阅读更多...
Java EE 6 Web配置文件。 在云上。 简单。

Java EE 6 Web配置文件。 在云上。 简单。

Java SE还可以。 Java EE是邪恶的。 这就是我一直想的。 好吧&#xff0c;现在不再了。 让我分享我的经验。 几周前&#xff0c;我开始考虑将旧版spring hibernate tomcat应用程序移植到新平台上&#xff1a; SAP NetWeaver云 。 我知道您在极客那里的想法&#xff1a;…
阅读更多...
Kubernetes核心概念总结

Kubernetes核心概念总结

1、基础架构 1.1 Master Master节点上面主要由四个模块组成&#xff1a;APIServer、scheduler、controller manager、etcd。 APIServer。APIServer负责对外提供RESTful的Kubernetes API服务&#xff0c;它是系统管理指令的统一入口&#xff0c;任何对资源进行增删改查的操作都要…
阅读更多...
php连接mysql数据,php连接mysql数据库

php连接mysql数据,php连接mysql数据库

$sql_link mysql_connect("主机名","登入用户名","登入用户名密码");如果连接成功&#xff0c;就会返回一个mysql句柄,可以简单的理解成这个$sql_link 是php跟mysql的一个桥梁&#xff0c;通过该桥梁我们可以进入到mysql。进入到mysql之后&…
阅读更多...
url存在宽字节跨站漏洞_利用WebSocket跨站劫持（CSWH）漏洞接管帐户

url存在宽字节跨站漏洞_利用WebSocket跨站劫持（CSWH）漏洞接管帐户

在一次漏洞悬赏活动中&#xff0c;我发现了一个使用WebSocket连接的应用&#xff0c;所以我检查了WebSocket URL&#xff0c;发现它很容易受到CSWH的攻击(WebSocket跨站劫持)有关CSWH的更多详细信息&#xff0c;可以访问以下链接了解https://www.christian-schneider.net/Cross…
阅读更多...
php 数组对比 unset,如何区分PHP中unset,array_splice的区别

php 数组对比 unset,如何区分PHP中unset,array_splice的区别

1.使用的函数a.函数unset()unset ( mixed $var , mixed $... ? ) : voidunset()销毁指定的变量。b.函数array_slice()array_splice(array,start,length,array)array表示数组。start表示删除元素的开始位置。length表示被移除的元素个数&#xff0c;也是被返回数组的长度。(可…
阅读更多...
前端基础-CSS的各种选择器的特点以及CSS的三大特性

前端基础-CSS的各种选择器的特点以及CSS的三大特性

一、 基本选择器二、 后代选择器、子元素选择器三、 兄弟选择器四、 交集选择器与并集选择器五、 序列选择器六、 属性选择器七、 伪类选择器八、 伪元素选择器九、 CSS三大特性 一、 基本选择器 1、id选择器 #1、作用&#xff1a;根据指定的id名称&#xff0c;在当前界面中找…
阅读更多...
使用JavaCV进行手和手指检测

使用JavaCV进行手和手指检测

这篇文章是Andrew Davison博士发布的有关自然用户界面&#xff08;NUI&#xff09;系列的一部分&#xff0c;内容涉及使用JavaCV从网络摄像头视频提要中检测手。 注意&#xff1a;可以从http://fivedots.coe.psu.ac.th/~ad/jg/nui055/下载本章的所有源代码。 第5章的彩色斑点检…
阅读更多...
不能装载文档控件。请在检查浏览器的选项中检查浏览器的安全设置_【2020年网络安全宣传周】如何正确设置浏览器...

不能装载文档控件。请在检查浏览器的选项中检查浏览器的安全设置_【2020年网络安全宣传周】如何正确设置浏览器...

李夏是一个公司的职员&#xff0c;一天晚上加班赶制文档&#xff0c;由于要向客户汇报产品情况&#xff0c;需要获取大量网上信息&#xff0c;然而在制作中却发现浏览器的网页打不开了。第二天原计划向客户展示的材料未能完整汇总&#xff0c;客户见面对接效果也打了折扣。在当…
阅读更多...
用装饰器设计模式装饰

用装饰器设计模式装饰

装饰图案是广泛使用的结构图案之一。 此模式在运行时动态更改对象的功能&#xff0c;而不会影响对象的现有功能。 简而言之&#xff0c;此模式通过包装将附加功能添加到对象。 问题陈述&#xff1a; 想像一下我们有一个比萨饼&#xff0c;该比萨饼已经用番茄和奶酪烤制的情况。…
阅读更多...
vcpkg安装_微软牌包管理器vcpkg更新及路线图计划

vcpkg安装_微软牌包管理器vcpkg更新及路线图计划

蝎子vcpkg是一套跨平台&#xff0c;开源的C/C库管理器&#xff0c;今天的这篇文章是有关vcpkg主题的2020年4月博文更新。在这篇文章中&#xff0c;我们将分享有关vcpkg 2020.04发布版本的一些信息以及vcpkg的路线图(roadmap)&#xff0c;我们会在这里持续地发布有关vcpkg的最新…
阅读更多...
CSS 盒模型与box-sizing

CSS 盒模型与box-sizing

一、盒模型 一个web页面由许多html元素组成&#xff0c;而每一个html元素都可以表示为一个矩形的盒子&#xff0c;CSS盒模型正是描述这些矩形盒子的存在。 MDN的描述&#xff1a; When laying out a document, the browsers rendering engine represents each element as a r…
阅读更多...
Java课程设计 购物车系统（个人博客） 201521123052 蓝锦明

Java课程设计 购物车系统（个人博客） 201521123052 蓝锦明

1. 团队课程设计博客链接 课程设计团队博客 2. 个人负责模块或任务说明 &#xff08;1&#xff09;制作图形菜单引导界面 &#xff08;2&#xff09;定义各获取和输出类函数 3. 自己的代码提交记录截图 4. 自己负责模块或任务详细说明 import java.text.NumberFormat; public c…
阅读更多...
7-12（图） 社交网络图中结点的“重要性”计算（30 分）

7-12（图） 社交网络图中结点的“重要性”计算（30 分）

在社交网络中&#xff0c;个人或单位&#xff08;结点&#xff09;之间通过某些关系&#xff08;边&#xff09;联系起来。他们受到这些关系的影响&#xff0c;这种影响可以理解为网络中相互连接的结点之间蔓延的一种相互作用&#xff0c;可以增强也可以减弱。而结点根据其所处…
阅读更多...
linux系统的安装程序,Linux系统安装

linux系统的安装程序,Linux系统安装

为了不影响本机系统&#xff0c;建议在虚拟机上创建并安装Linux系统&#xff0c;本次安装centos7 64位的镜像。详细步骤如下&#xff1a;1、首先在虚拟机主页创建新的虚拟机。... 图1.1 2、选择自定义安装&#xff0c;这样方便我们更好了解虚拟机&#xff0c;然后点击下一步。.…
阅读更多...
百米路由器2登陆地址_腾达无线路由器怎么安装，真的不错

百米路由器2登陆地址_腾达无线路由器怎么安装，真的不错

腾达无线路由器怎么安装1、WAN口连接宽带进线(即网络公司进来的线或猫出来的线&#xff0c;一般颜色不一样)、LAN口连接局域网内的电脑。2、设置所连接电脑的IP地址。右键点击网上邻居属性3、右键点击本地连接属性4、选择Internet协议TCP/IP属性5、点击选择自动获得IP地址和自动…
阅读更多...
JavaFX 2 XYCharts和Java 7功能

JavaFX 2 XYCharts和Java 7功能

我最喜欢的JavaFX 2功能之一是它在javafx.scene.chart包中提供的标准图表。 该软件包提供了几种不同类型的现成图表。 除了其中之一&#xff08; PieChart &#xff09;以外&#xff0c;所有其他都是“ 2轴图”&#xff08; XYChart的特定实现&#xff09;。 在本文中&#xff…
阅读更多...
前端基础-HTML的的标签详解

前端基础-HTML的的标签详解

阅读目录 一、head内常用标签二、 HTML语义化三、 字符实体四、 h系列标签五、 p标签六、 img标签七、 a标签八、 列表标签九、 table标签十、 form标签 一、 head内常用标签 1、meta相关 #1、指定字符集<meta charset"gbk">#2、页面描述<meta name"…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023