CSS: Flexbox
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.
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的更多相关文章
- CSS Flexbox 学习指南、工具与框架
Flexbox 是一种更有效的布局方式,它能更好的分配容器空间,并控制项目的对齐.虽然,掌握它的理论有些复杂,但幸运的是,我们可以借助开放的网络来学习并逐步掌握它. 在本文中,我们整合了一些最佳的 F ...
- CSS Flexbox 弹性盒子模型
CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...
- CSS#Flex-box, border-size, onresize() event, Media Queries
Flexbox Pseudo-classes box-sizing: border-box HTML DOM event resize() @media Queries: 根据一些css条件,触发一 ...
- css flexbox 弹性布局
flexbox 即css flexible box layout. ie9及以下不支持flexbox. flex详细规范(https://www.w3.org/TR/css-flexbox/) 为什么 ...
- 使用css Flexbox实现垂直居中
CSS布局对我们来说一直是个噩梦,我们都认为flexbox是我们的救世主.是否真的如我们说说,还有待观察,但是flexbox确非常轻松的解决css长久一来比较难解决的居中问题.让我们来看看到底有多容易 ...
- css flexbox水平垂直
display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -moz-flex;display: -ms-flexbox ...
- css FlexBox 弹性盒子常用方法总结
总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ ...
- Flex布局（CSS Flexbox）
参考:Flex 布局语法教程 Flex布局是什么? Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 注意:设为Fle ...
- 分享15个优秀的 CSS 解决方案和工具
CSS 代码是很难管理,尤其是在大型项目. 样式都写在一个全局作用域里,通过复杂的选择器来指向特定的页面元素.冗余.膨胀和维护可以成为前端开发人员的一场噩梦.幸运的是我们有一些 CSS 工具来帮助开发 ...
随机推荐
- 吴超老师课程---Hadoop的分布式集群安装
1.hadoop的分布式安装过程 1.1 分布结构 主节点(1个,是hadoop0):NameNode.JobTracker.SecondaryNameNode 从节点(2个,是 ...
- 学员管理系统(简单的Django设计)
学员管理系统(简单的Django设计) 学员管理系统 项目规划阶段 项目背景 近年来老男孩教育的入学学员数量稳步快速增长,传统的excel统计管理学员信息的方式已经无法满足日渐增长的业务需求.因此公司 ...
- java要注意的问题3
十七.使用正则 正则表达式的结构摘录如下(来源: Oracle官网) 字符 x 字符x / 反斜杠 /0n 8进制值为0n的字符(0<=n<=7) /0nn /0mnn 8进制值为0m ...
- EXSITS应该怎么用？
无论是做项目还是普通使用SQL,我们通常都会使用IN.因为很好理解,也很方便.但是,面对着多层查询嵌套,或者IN关键字里面的结果集数量巨大,查询的效率就会直线下降.这时候,我们应该用好EXSITS. ...
- Java Web专题
- Kattis - pizzahawaii 【状态标记】
Kattis - pizzahawaii [状态标记] Description You are travelling in a foreign country. Although you are al ...
- SQL server 数据库 操作及简单查询
使用SQL Sever语言进行数据库的操作 常用关键字identity 自增长primary key 主键unique 唯一键not null 非空references 外键(引用) 在使用查询操作数 ...
- linux 安装 maven
一.下载 1.创建下载软件包目录 mkdir /home/install 2.在/home/install下载maven包,或者将下载好的maven压缩包上传至/home/install wget ...
- [转]毕设- 深入HBase架构解析（二）
深入HBase架构解析(二) 前言 这是<深入HBase架构解析(一)>的续,不多废话,继续.... HBase读的实现 通过前文的描述,我们知道在HBase写时,相同Cell(RowKe ...
- CentOS 7如何将.deb文件转换.rpm
1.首先下载alien工具 http://ftp.de.debian.org/debian/pool/main/a/alien/ http://ftp.de.debian.org/debian/po ...