html

<div class="business-content-1">
<div class="item">
111
</div>
<div class="item">
222
</div>
<div class="item">
333
</div>
<div class="item">
444
</div>
</div>

css

.business-content-1 {
display: flex; /* 弹性布局 */
margin: 0 auto;
margin-top: 60px;
width: 1200px;
height: 354px;
border: 1px solid red;
justify-content: space-between; /* 横向中间自动空间 */
align-content: space-between; /* 竖向中间自动空间 */
flex-wrap: wrap; /* 换行 */
.item {
width: 585px;
height: 162px;
border: 1px solid blue;
}

这里把高度都给限制死了。

可以换一个思路,通过设置margin-top来处理竖向空间。

.business-content-1 {
display: flex; /* 弹性布局 */
margin: 0 auto;
margin-top: 60px;
width: 1200px;
border: 1px solid red;
justify-content: space-between; /* 横向中间自动空间 */
flex-wrap: wrap; /* 换行 */
.item {
width: 585px;
height: 162px;
border: 1px solid blue;
}
.item:nth-child(n+3) /* 第三个元素,及以后的元素 */
{
margin-top:30px;
}
}

Flex实现左右布局的更多相关文章

  1. Flex box弹性布局 及 响应式前端设计的优化

    Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...

  2. CSS3:布局display属性的flex(弹性布局)

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

  3. display Flex 盒子模型布局兼容Android UC

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta content= ...

  4. CSS开发技巧(四):解决flex多行布局的行间距异常、子元素高度拉伸问题

    在使用flex布局时,若出现换行,有两种较为特殊的现象是值得我们研究的: 子元素高度被拉伸,其实际高度大于它的内容高度. 各行子元素之间的行间距过大,甚至我们根本没有给子元素设置margin. 现在我 ...

  5. flex模拟微信布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. Flex:CSS3布局利器

    实习以来做了三个小控件,都是用的CSS2.1里传统的DIV+CSS布局方式,综合使用position.margin.float.BFC等属性或特性将元素放到指定的位置上.然而面对日益复杂的界面,这些来 ...

  7. 【flex弹性盒布局】------这个强大的功能

    你知道flex弹性布局么? 我们先来了解它的概念:Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 ...

  8. flex弹性盒子布局

    一.在需要使用弹性盒子的容器上添加属性:display:flex 或者 display:inline-flex; 二.在父容器上添加flex-direction设置子元素主轴方向: 不写默认值是X轴从 ...

  9. css3 flex弹性盒子布局梳理,打通任督二脉

    挺早就接触了css的flex布局,深入使用也就是在近期移动端开发.老来多健忘,只能自己梳理一下知识点,当做温故知新吧. ,请原谅小白的才疏学浅,写的不到位的地方请指正. flex属性用于设置或检索弹性 ...

  10. flex (html弹性布局)

    flex是什么? 任何容器都可以指定为flex布局: .box{ display: flex;  /* 行内元素可以使用:inline-flex,webket内核浏览器必须 -webkit-flex ...

随机推荐

  1. Java项目开发流程()

    1项目启动 2需求调研 3系统设计详细设计 4程序开发 5测试 6试用培训维护 项目成员组成 1需求工程师其要求 2系统分析师设计师其要求 3开发工程师其要求 4测试工程师其要求 5管理人员 6其他人 ...

  2. idea中将普通工程设置为maven项目

    只需要在工程上右键,"Add Frameworks support...",然后选择Maven即可

  3. 查看文件MD5值

    Windows 打开命令窗口(Win+R),然后输入cmd ·输入命令certutil -hashfile 文件绝对路径 MD5 Linux MD5算法常常被用来验证网络文件传输的完整性,防止文件被人 ...

  4. 使用 requests.post 方法抓取有道翻译结果

    import requests as rq import json def get_translate(word=None): url = 'http://fanyi.youdao.com/trans ...

  5. Codeforces Round #574 (Div. 2) E.OpenStreetMap

    题目链接 题目的意思就是给你一个矩阵你要求给定子矩阵的最小值的和 单调队列扫两边即可 #include <bits/stdc++.h> #define ll long long #defi ...

  6. Codeforces Round #658 (Div. 2)【ABC2】

    做完前四题还有一个半小时... 比赛链接:https://codeforces.com/contest/1382 A. Common Subsequence 题意 给出两个数组,找出二者最短的公共子序 ...

  7. Luogu T7468 I liked Matrix!

    题目链接 题目背景 无 题目描述 在一个n*m 的矩阵A 的所有位置中随机填入0 或1,概率比为x : y.令B[i]=a[i][1]+a[i][2]+......+a[i][m],求min{B[i] ...

  8. STL中去重函数unique

    一:unique(a.begin(),a.end());去重函数只是去掉连续的重复值,对于不连续的值没有影响,SO,在使用前一般需要进行排序处理: 二:  vector<int>::ite ...

  9. Codeforces Round #272 (Div. 2) B. Dreamoon and WiFi (暴力二进制枚举)

    题意:给你一个只含\(+\)和\(-\)的字符串,统计它的加减和,然后再给你一个包含\(+,-,?\)的字符串,其中\(?\)可以表示为\(+\)或\(-\),问有多少种情况使得第二个字符串的加减和等 ...

  10. 【史上最全】Hadoop 核心 - HDFS 分布式文件系统详解(上万字建议收藏)

    1. HDFS概述 Hadoop 分布式系统框架中,首要的基础功能就是文件系统,在 Hadoop 中使用 FileSystem 这个抽象类来表示我们的文件系统,这个抽象类下面有很多子实现类,究竟使用哪 ...