【前言】
昨天总结了下flex布局的基础语法，今天来做几个实例深入学习下。
推荐一篇不错的博主：阮一峰老师，文章写的十分详细，结合简单图片解析后可以快速理解。
下面记下根据教程学习后的笔录
【列表】
（1）经典的骰子布局（1点和6点）
（2）网格布局
（3）圣杯布局
（4）输入框布局
【主体】
（1）经典的骰子布局
基本模板架构：
<div class="box"> <span class="item"></span> </div>
div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推
①六点
<style type="text/css">
.box{
width: 250px;
height: 250px;
background: rgba(0,0,0,0.5);
border-radius: 10%;
margin: auto;
padding: 15px;
display: flex;
flex-direction:row;/*水平排列方向*/
flex-wrap: wrap;/*换行*/
justify-content: space-around;/*水平对齐方式*/
align-content: space-around;/*垂直对齐方式*/
}
.column{
width: 100%;
height: auto;
justify-content: space-around;
display: flex;
}
.item{
display: block;
height: 50px;
width: 50px;
background-color: white;
border-radius: 100%;
}
</style>
<div class="box">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
②一点
//css
.box{
display: flex;
justify-content: center;/*水平对齐方式*/
align-items: center;/*垂直对齐方式*/
}
//HTML
<div class="box">
<span class="item"></span>
</div>
（2）网格布局
①基本网格布局
最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放
<style type="text/css">
.Grid {display: flex;}
.Grid-cell { flex: 1;}
</style>
<div class="Grid">
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
</div>
②百分比布局
某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间
（3）圣杯布局（Holy Grail Layout）
指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局实例</title>
<style type="text/css">
*{margin: 0;padding: 0}
.main-body{
box-sizing: border-box;
display: flex;
min-height: 600px;
flex-direction: column;/*项目排列方向垂直*/
}
header,footer{
text-align: center;
flex: auto;
height: 10%;
}
header{background-color: rebeccapurple}
footer{background-color: #5bd5a0}
.body {
text-align: center;
display: flex;
flex: 1;
background-color: #AAAAAA;
}
main{flex: 1}
nav,aside{
/* 两个边栏的宽度设为16em */
flex: 0 0 16em;
}
nav{background-color: #1daee9}
aside{background-color: #009922}
nav {
/* 导航放到最左边 */
order: -1;
}
//如果是小屏幕，躯干的三栏自动变为垂直叠加
@media (max-width: 768px) {
.body {
flex-direction: column;
flex: 1;
}
nav,aside,main{
flex: auto;
}
}
</style>
</head>
<body>
<div class="main-body">
<header>头部</header>
<div class="body">
<main>主体部分</main>
<nav>左侧导航栏</nav>
<aside>副栏</aside>
</div>
<footer>底部</footer>
</div>
</body>
</html>
（4）输入框的布局
我们常常需要在输入框的前方添加提示，后方添加按钮
//CSS代码
.InputAddOn {display: flex;}
.InputAddOn-field {flex: 1;}
//HTML代码
<div class="InputAddOn">
<span class="InputAddOn-item">...</span>
<input class="InputAddOn-field">
<button class="InputAddOn-item">...</button>
</div>
.
相关推荐
实例DOM通常会包含多个具有不同flex属性的div元素，用于展示不同情况的效果，帮助开发者更好地理解和掌握flex布局的工作原理。例如，通过动态改变这些属性的值，我们可以观察到子元素的排列、大小和位置是如何根据...
本源代码将研究学习微信小程序的FlexLayout布局实例，微信小程序界面设计实例，是一种流布局的实现例子，而不是大家熟悉的盒子式布局，据说即使需要深层的嵌套，FlexLayout布局的响应速度也不会超过1ms，可谓是非常...
在本实例教程中，廖雪峰老师通过一系列的实例，展示了Flex布局的强大功能和使用方法。 首先，Flex布局涉及到两个基本概念：Flex容器和Flex项目。在Flex布局中，容器内的直接子元素自动成为Flex项目，并且可以应用...
Flexbox，全称为Flexible Box，是CSS3引入的一种布局模型，专为解决复杂的网页布局问题而设计，尤其在处理响应式设计和动态内容时表现出强大的灵活性。本实例将深入探讨Flexbox布局的基本概念、属性以及如何在实际...
Flex布局，全称为Flexible Box布局，是CSS3中的一种新的布局模式，旨在解决传统盒模型在处理复杂或响应式布局时的困难。它允许容器内的子元素在行或列方向上灵活地调整大小和排列，以适应不同的屏幕尺寸和设备方向。...
本教程将带你深入理解Flex布局，并通过实例演示如何利用HTML和CSS搭建一个网页页面。 首先，让我们了解Flex布局的核心概念。Flex布局的主要目标是解决传统CSS布局（如Block和Inline）在处理复杂或响应式布局时的...
本实例聚焦于使用Flex布局进行移动Web开发，通过具体的源码分析，我们可以深入理解并掌握这一强大的CSS布局模式。 1. Flex布局基础： Flex布局允许开发者轻松地调整元素的大小和位置，以适应不同屏幕尺寸和设备...
三、Flex布局实例 在微信小程序中，我们可以通过以下方式实现一个简单的Flex布局： ```html <view class="item">1 <view class="item">2 <view class="item">3 ``` ```css .container { display: flex; ...
title: Flex布局实例categories: 前端根据之前看的flex布局的语法，结合网上的实例教程，写了几个骰子的布局（实例来自阮一峰的网络日志Fle
总之，Flex布局是现代移动Web开发不可或缺的一部分，它大大简化了复杂布局的设计，提高了响应式页面的实现效率。熟练掌握Flex布局，能帮助开发者更好地适应不同设备和屏幕尺寸的需求，构建出优雅且适应性强的网页...
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
Flex布局，全称为“Flexible Box”，也称作弹性盒布局，是CSS3中引入的一种新的布局模式，旨在解决复杂的网页布局问题，特别是在响应式设计中。它为容器内的子元素提供了更加灵活的对齐方式，使得在不同屏幕尺寸下...
5. **界面设计**：利用Flex提供的组件和布局，设计用户界面，展示从服务器获取的数据，并处理用户的输入，将新的数据发送回服务器。 6. **测试与调试**：通过Flex的调试工具和服务器端的日志，对应用进行测试和调试...
本资源"Flex源码大合集"是一个集合，包含了多种Flex项目的源代码实例，适用于开发者深入学习和理解Flex的特殊效果和功能。 1. **Flex框架**：Flex框架是Adobe提供的一个开发工具，它允许开发者使用MXML和...
Java Flex入门实例主要涉及到的是Java和Adobe Flex的集成开发，这是一种常见的富互联网应用程序（Rich Internet Application，RIA）开发模式。Flex是基于ActionScript和Flash Player技术的开发框架，用于构建具有...
总之，Flex翻页效果实例展示了如何结合ActionScript和MXML的力量，构建一个富有吸引力和互动性的用户界面。这种技术不仅可以用于电子书应用，还可以应用于各种其他需要动态翻页效果的项目，如幻灯片展示、杂志阅读器...
CSS+DIV布局实例是学习网页布局时不可或缺的一部分，它能够帮助开发者掌握如何有效地利用CSS控制网页元素的布局和样式，实现灵活多变的设计效果。 CSS是一种样式表语言，用于定义HTML或XML（包括如SVG、MathML等...
在Flex播放器实例中，第一个基础实例可能展示了如何创建一个基本的媒体播放器控件，包括加载视频、播放、暂停、停止以及音量控制等功能。开发者会学习如何使用Flex的MediaElement组件，该组件能够处理音频和视频内容...
这个“Flex应用实例 - Flex做的旅游系统”是一个很好的学习资源，它展示了Flex在实际项目中的应用，特别是对于旅游行业的信息化管理。 在旅游系统中，Flex的主要优势在于其强大的数据可视化和用户交互能力。以下是...
这个"03-flex布局.zip"压缩包很显然是一个关于Flex布局的学习资源，可能包含了教程、实例代码或者演示。虽然没有具体的标签和子文件列表，我们可以深入探讨Flex布局的核心概念和关键属性。 Flex布局主要解决的是...