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，一经查实，立即删除！

相关文章

【升级版】如何使用阿里云云解析API实现动态域名解析，搭建私有服务器【含可执行文件和源码】...

【升级版】如何使用阿里云云解析API实现动态域名解析，搭建私有服务器【含可执行文件和源码】...

原文地址&#xff1a;http://www.yxxrui.cn/article/179.shtml 未经许可请勿转载&#xff0c;如有疑问&#xff0c;请联系作者&#xff1a;yxxrui163.com 我遇到的问题&#xff1a;公司的网络没有固定的公网IP地址&#xff0c;但是需要能够保证的是&#xff0c;每次动态分配的I…
阅读更多...
Java管理扩展

Java管理扩展

什么是JMX&#xff1f; Java管理扩展&#xff08;JMX&#xff09;是一种API&#xff0c;用于管理或监视各种资源&#xff0c;例如应用程序&#xff0c;设备&#xff0c;服务&#xff0c;当然还有JVM。 通过Java社区流程&#xff08;JCP&#xff09;开发&#xff0c;JMX技术被构…
阅读更多...
登录网页后要弹出一个新标签_连永久链接都不会，还做什么新媒体？

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

上次给主编大大发的预览链接失效了&#xff0c;被骂得狗血淋头。大部分运营人可能都遇到过这种情况&#xff0c;忽视了预览生成的链接只是临时的&#xff0c;在12小时后或超过500阅读量后就会失效。一个疏忽&#xff0c;给自己带来了不必要的麻烦&#xff0c;耽误工作&#xff…
阅读更多...
混频通信的matlab仿真,基于MATLAB的扩频通信系统仿真研究—上海交通大学

混频通信的matlab仿真,基于MATLAB的扩频通信系统仿真研究—上海交通大学

基于MATLAB 的扩频通信系统仿真研究范伟 翟传润 战兴群(上海交通大学电子信息与电气工程学院&#xff0c;200030&#xff0c;上海)摘要 本文阐述了扩展频谱通信技术的理论基础和实现方法&#xff0c;利用MATLAB 提供的可视化工具Simulink 建立了扩频通信系统仿真模型&#xff0…
阅读更多...
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…
阅读更多...
python 重置索引_python pandas 对series和dataframe的重置索引reindex方法

python 重置索引_python pandas 对series和dataframe的重置索引reindex方法

reindex更多的不是修改pandas对象的索引&#xff0c;而只是修改索引的顺序&#xff0c;如果修改的索引不存在就会使用默认的None代替此行。且不会修改原数组&#xff0c;要修改需要使用赋值语句。series.reindex()import pandas as pdimport numpy as npobj pd.Series(range(4…
阅读更多...
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;任何对资源进行增删改查的操作都要…
阅读更多...
七、spring boot 1.5.4 集成shiro+cas，实现单点登录和权限控制

七、spring boot 1.5.4 集成shiro+cas，实现单点登录和权限控制

1.安装cas-server-3.5.2 官网&#xff1a;https://github.com/apereo/cas/releases/tag/v3.5.2 下载地址&#xff1a;cas-server-3.5.2-release.zip 安装参考文章&#xff1a;http://blog.csdn.net/xuxuchuan/article/details/54924933 注意&#xff1a; 输入 <tomcat_key&g…
阅读更多...
php连接mysql数据,php连接mysql数据库

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

$sql_link mysql_connect("主机名","登入用户名","登入用户名密码");如果连接成功&#xff0c;就会返回一个mysql句柄,可以简单的理解成这个$sql_link 是php跟mysql的一个桥梁&#xff0c;通过该桥梁我们可以进入到mysql。进入到mysql之后&…
阅读更多...
CSS-自定义变量

CSS-自定义变量

使用背景&#xff1a; 一些常见的例子&#xff1a;为风格统一而使用颜色变量一致的组件属性&#xff08;布局&#xff0c;定位等&#xff09;避免代码冗余*更方便的从CSS向JS传递数据&#xff08;例如媒体断点&#xff09; 为什么使用&#xff1a; 以下几点是未来CSS属性的简短…
阅读更多...
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;也是被返回数组的长度。(可…
阅读更多...
MapReduce算法–二级排序

MapReduce算法–二级排序

我们将继续进行有关实现MapReduce算法的系列文章&#xff0c;该系列可在使用MapReduce进行数据密集型文本处理中找到。 本系列的其他文章&#xff1a; 使用MapReduce进行数据密集型文本处理 使用MapReduce进行数据密集型文本处理-本地聚合第二部分 使用Hadoop计算共现矩阵 …
阅读更多...
Redis 字符串(String)

Redis 字符串(String)

Redis 字符串(String) Redis 字符串数据类型的相关命令用于管理 redis 字符串值&#xff0c;基本语法如下&#xff1a; 语法 redis 127.0.0.1:6379> COMMAND KEY_NAME 实例 redis 127.0.0.1:6379> SET runoobkey redis OK redis 127.0.0.1:6379> GET runoobkey "…
阅读更多...
前端基础-CSS的各种选择器的特点以及CSS的三大特性

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

一、 基本选择器二、 后代选择器、子元素选择器三、 兄弟选择器四、 交集选择器与并集选择器五、 序列选择器六、 属性选择器七、 伪类选择器八、 伪元素选择器九、 CSS三大特性 一、 基本选择器 1、id选择器 #1、作用&#xff1a;根据指定的id名称&#xff0c;在当前界面中找…
阅读更多...
Php流式 大文件,如何使用PHP解析XML大文件

Php流式 大文件,如何使用PHP解析XML大文件

如果使用 PHP 解析 XML 的话&#xff0c;那么常见的选择有如下几种&#xff1a;DOM、SimpleXML、XMLReader。如果要解析 XML 大文件的话&#xff0c;那么首先要排除的是 DOM&#xff0c;因为使用 DOM 的话&#xff0c;需要把整个文件全部加载才能解析&#xff0c;效率堪忧&…
阅读更多...
python 白盒测试_白盒测试教程 - 颜丽的个人空间 - OSCHINA - 中文开源技术交流社区...

python 白盒测试_白盒测试教程 - 颜丽的个人空间 - OSCHINA - 中文开源技术交流社区...

总共贴了39节&#xff0c;后续还有很长&#xff0c;共122节&#xff0c;文章名为‘白盒测试教程’1、白盒测试概念2、测试覆盖标准3、逻辑驱动测试4、基本路径测试白盒测试概念1、白盒测试也称结构测试或逻辑驱动测试&#xff0c;是一种测试用例设计方法&#xff0c;它从程序的…
阅读更多...
Oracle 分析函数及常用函数

Oracle 分析函数及常用函数

什么叫分析函数(Analytic function)&#xff1f; Oracle从8.1.6开始提供分析函数&#xff0c;分析函数用于计算基于组的某种聚合值&#xff0c;它和聚合函数的不同之处是 对于每个组返回多行&#xff0c;而聚合函数对于每个组只返回一行。 基本语法 function_name(arg1,arg2,..…
阅读更多...
最新文章

Copyright @ 2022~2023