Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

  box-sizing: border-box;

}

/* Style the body */

body {

  font-family: Arial;

  margin: 0;

}

/* Header/logo Title */

.header {

  padding: 60px;

  text-align: center;

  background: #1abc9c;

  color: white;

}

/* Style the top navigation bar */

.navbar {

  display: flex;

  background-color: #333;

}

/* Style the navigation bar links */

.navbar a {

  color: white;

  padding: 14px 20px;

  text-decoration: none;

  text-align: center;

}

/* Change color on hover */

.navbar a:hover {

  background-color: #ddd;

  color: black;

}

/* Column container */

.row {

  display: flex;

  flex-wrap: wrap;

}

/* Create two unequal columns that sits next to each other */

/* Sidebar/left column */

.side {

  flex: 30%;

  background-color: #f1f1f1;

  padding: 20px;

}

/* Main column */

.main {

  flex: 70%;

  background-color: white;

  padding: 20px;

}

/* Fake image, just for this example */

.fakeimg {

  background-color: #aaa;

  width: 100%;

  padding: 20px;

}

/* Footer */

.footer {

  padding: 20px;

  text-align: center;

  background: #ddd;

}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 700px) {

  .row, .navbar {

    flex-direction: column;

  }

}

</style>

</head>

<body>

<!-- Note -->

<div style="background:yellow;padding:5px">

  <h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4>

</div>

<!-- Header -->

<div class="header">

  <h1>My Website</h1>

  <p>With a <b>flexible</b> layout.</p>

</div>

<!-- Navigation Bar -->

<div class="navbar">

  <a href="#">Link</a>

  <a href="#">Link</a>

  <a href="#">Link</a>

  <a href="#">Link</a>

</div>

<!-- The flexible grid (content) -->

<div class="row">

  <div class="side">

    <h2>About Me</h2>

    <h5>Photo of me:</h5>

    <div class="fakeimg" style="height:200px;">Image</div>

    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>

    <h3>More Text</h3>

    <p>Lorem ipsum dolor sit ame.</p>

    <div class="fakeimg" style="height:60px;">Image</div><br>

    <div class="fakeimg" style="height:60px;">Image</div><br>

    <div class="fakeimg" style="height:60px;">Image</div>

  </div>

  <div class="main">

    <h2>TITLE HEADING</h2>

    <h5>Title description, Dec 7, 2017</h5>

    <div class="fakeimg" style="height:200px;">Image</div>

    <p>Some text..</p>

    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>

    <br>

    <h2>TITLE HEADING</h2>

    <h5>Title description, Sep 2, 2017</h5>

    <div class="fakeimg" style="height:200px;">Image</div>

    <p>Some text..</p>

    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>

  </div>

</div>

<!-- Footer -->

<div class="footer">

  <h2>Footer</h2>

</div>

</body>

</html>

Flexbox Elements

To start using the Flexbox model, you need to first define a flex container.

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

  display: flex;

  background-color: DodgerBlue;

}

.flex-container > div {

  background-color: #f1f1f1;

  margin: 10px;

  padding: 20px;

  font-size: 30px;

}

</style>

</head>

<body>

<div class="flex-container">

  <div>1</div>

  <div>2</div>

  <div>3</div>

</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>

</html>

The flex container properties are:

The flex-direction Property

The flex-direction property defines in which direction the container wants to stack the flex items.

 column: (from top to bottom)
 row: (from bottom to top)
The column-reverse value stacks the flex items vertically (but from bottom to top)

The row-reverse value stacks the flex items horizontally (but from right to left)

The flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not.

CSS: Flexbox的更多相关文章

  1. CSS Flexbox 学习指南、工具与框架

    Flexbox 是一种更有效的布局方式,它能更好的分配容器空间,并控制项目的对齐.虽然,掌握它的理论有些复杂,但幸运的是,我们可以借助开放的网络来学习并逐步掌握它. 在本文中,我们整合了一些最佳的 F ...

  2. CSS Flexbox 弹性盒子模型

    CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...

  3. CSS#Flex-box, border-size, onresize() event, Media Queries

    Flexbox Pseudo-classes box-sizing: border-box HTML DOM event  resize() @media Queries: 根据一些css条件,触发一 ...

  4. css flexbox 弹性布局

    flexbox 即css flexible box layout. ie9及以下不支持flexbox. flex详细规范(https://www.w3.org/TR/css-flexbox/) 为什么 ...

  5. 使用css Flexbox实现垂直居中

    CSS布局对我们来说一直是个噩梦,我们都认为flexbox是我们的救世主.是否真的如我们说说,还有待观察,但是flexbox确非常轻松的解决css长久一来比较难解决的居中问题.让我们来看看到底有多容易 ...

  6. css flexbox水平垂直

    display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -moz-flex;display: -ms-flexbox ...

  7. css FlexBox 弹性盒子常用方法总结

    总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ ...

  8. Flex布局（CSS Flexbox）

    参考:Flex 布局语法教程 Flex布局是什么? Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 注意:设为Fle ...

  9. 分享15个优秀的 CSS 解决方案和工具

    CSS 代码是很难管理,尤其是在大型项目. 样式都写在一个全局作用域里,通过复杂的选择器来指向特定的页面元素.冗余.膨胀和维护可以成为前端开发人员的一场噩梦.幸运的是我们有一些 CSS 工具来帮助开发 ...

随机推荐

  1. Jupyter Notebook修改目标文件

    默认的路径 如果没有修改配置文件,那么一般就在用户目录下面: 下面各处默认起始目标地址,以防有一天想改回来 I:\shujufenxi\python.exe I:\shujufenxi\cwp.py ...

  2. 大数据生态，哪些框架需要全部启动，哪些只启动master，仅为汇总

    主从,只需要在master节点启动 hadoop hbase 单机启动 hive 其他,需要启动每个节点 zookeeper kafka flume presto

  3. grid布局笔记

    1.应用 display: grid 的元素.这是所有网格项(Grid Items)的直接父级元素.即容器 2.网格容器(Grid Container)的子元素(直接子元素). 3.注意:在 网格容器 ...

  4. 存在单点故障的namenode宕机恢复测试

    前提:如果namenode没有做HA,那么至少应该启用secondarynamenode,以便namenode宕机之后手动恢复数据 实验环境:3个节点(cenos 6.10) 测试前数据: 1.为了确 ...

  5. Spring 之定义切面尝试（基于 XML）

    有些场景下只能基于 XML 来定义切面. [Spring 之定义切面尝试] 1.XML 下定义切面(首先是要有一个对应的类...显然要比基于注解的麻烦) <?xml version=" ...

  6. Saltstack sls文件：批量安装服务

    一.使用saltstack 批量安装nginx 1.创建salt目录 mkdir /srv/{salt,pillar} 2.再/srv/salt/下创建sls文件 vim nginx_install. ...

  7. PHP面向对象程序设计之抽象类和抽象方法

    抽象类: 抽象类不能被实例化.抽象类中只定义(或部分实现)子类需要的方法.子类可以继承它并且通过实现其中的抽象方法,使抽象类具体化. 我们可以用一个abstract关键字来定义一个抽象类,示例如下: ...

  8. COS-5资源分配与调度

    操作系统是用户和计算机的接口,同时也是计算机硬件和其他软件的接口.操作系统的功能包括管理计算机系统的硬件.软件及数据资源,控制程序运行,改善人机界面,为其它应用软件提供支持,让计算机系统所有资源最大限 ...

  9. [CF]Cycling City

    题目大意:给定一张无向图,问图中是否存在两个点,使得这两个点之间有三条路径,而且三条路径没有公共点. 解法: 我们可以先走出来一个环,再出环上任意一点走到另外一点.就像这样:

  10. UVA 1640 The Counting Problem（按位dp）

    题意:给你整数a.b,问你[a,b]间每个数字分解成单个数字后,0.1.2.3.4.5.6.7.8.9,分别有多少个 题解:首先找到[0,b]与[0,a-1]进行区间减法,接着就只是求[0,x] 对于 ...