https://www.runoob.com/w3cnote/flex-grammar.html

display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;

两列Div居中 显示 用传统float方式就不是很好实现，本着能用css的 就不用js的原则。就用Flex布局

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

.box {

	display: flex;/*flex布局*/

	justify-content: center;/* justify-content属性定义了项目在主轴上的对齐方式。 横向对齐方式 */

	align-items: stretch; /* align-items属性定义项目在交叉轴上如何对齐 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 */

	flex-wrap: wrap; /* flex-wrap ：定义子元素超过一行，如何换行 wrap：换行，第二行在第一行下面，从左到右 */

	}

.boxInner{

	width:650px;

	height:30px;

	background-color:#cccccc;

	margin:10px;

	}

</style>

</head>

<body>

<div class="box">

<div class="boxInner">1</div>

<div class="boxInner">2</div>

<div class="boxInner">3</div>

<div class="boxInner">4</div>

</div>

</body>

</html>

　　如果后期在这个页面右侧加入一个DIV放右边的话，可以弄成float 左右俩，然后左侧的话宽度写成

float: left; width: calc(100% - 260px);

Flex 布局 （两个div居中自适应 宽度变小变一列，宽度够就是两列）的更多相关文章

  1. flex布局时，内容区域自适应高度

    页面元素高度固定,中间的元素需要撑满屏幕,或者内容多时显示滚动条时,我们要把父元素设置为height:100vh <div class="parent"> <di ...

  2. 一篇文章弄懂flex布局

     壹 ❀ 引 谈到flex布局,我不知道有多少人跟我一样,在本能的想到justify-content:center与align-items:center两条属性之后,除此之外的其它属性居然显得格外陌生 ...

  3. Flex布局在小程序的使用

    一篇旧文,上手小程序时做的一些探索 Flex布局是一种十分灵活方便的布局方式,目前主流的现代浏览器基本都实现了对Flex布局的完全支持.而在微信小程序中,IOS端使用的渲染引擎WKWebView和安卓 ...

  4. flex布局下，css设置文本不换行时，省略号不显示的解决办法

    大致是有一个main容器是flex布局,左边一个logo固定宽高,右边content动态宽度. <div class="main"> <img alt=" ...

  5. flex 布局下，css 设置文本不换行时，省略号不显示的解决办法

    大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度. <div class="main"> <img a ...

  6. 浅析flex 布局

    Flex基本概念: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end: ...

  7. button 使用 flex 布局的兼容性问题

    button 使用 flex 布局的兼容性问题 在低版本的手机系统中, button 不能够作为 flex 元素,即使在 CSS 中指定了 display: flex 且 autoprefixer 也 ...

  8. uniapp 小程序 flex布局 v-for 4栏展示

    注:本项目的图片资源来源于后端接口,所以使用的是v-for. 关键词:uniapp 小程序 flex布局 v-for 4栏展示 自适应 <view style="display: fl ...

  9. 两个DIV并排显示

    今天做的一个项目,需要做3个div,一个是总框(Div1),另外两个是子框,按比例填满div1,我设置好两个div的width和height,发现效果是两个子div上下显示,如图所示: 要想将两个DI ...

随机推荐

  1. i节点，容易被人遗忘的节点

    部分内容转自点击打开链接 点击打开链接 前段时间做了RHCE的一道题,是iSCSi的,后来在挂载的时候说是磁盘被占用.当时资料找了很多结果还是没有找到解决方法.反倒是发现了这个inode,也是关于被占 ...

  2. python 闭包变量不允许write，要使用nonlocal

    以下是一段简单的闭包代码示例: def foo(): m=3 n=5 def bar(): a=4 return m+n+a return bar >>>bar = foo() &g ...

  3. 并不对劲的bzoj2038:p1494:[国家集训队]小Z的袜子

    题目大意 有\(n\)(\(n\leq5*10^4\))个数\(a_1,a_2,...,a_n\)(\(\forall i\in[1,n], 1\leq a_i\leq n\)) \(m\)(\(m\ ...

  4. js函数定义 参数只要写名称就可以了

    js函数定义  参数只要写名称就可以了 以下为标准: function add(type)  { } 不要写成下面这个样子 function add(var type)  { } 哎 妹的  老何ja ...

  5. Mac下Ruby升级与Rails的安装

    也是醉了,网上查了半天一脸懵逼.然后自己动手试试 gem install rails瞬间命令行就没反应了,以为命令行挂了,但是一会儿报错说是没有权限. 好吧,那么来这个 sudo gem instal ...

  6. bzoj 3028: 食物【生成函数】

    承德汉堡:\( 1+x^2+x^4+...=\frac{1}{1-x^2} \) 可乐:\(1+x \) 鸡腿:\( 1+x+x^2=\frac{x^3-1}{x-1} \) 蜜桃多:\( x+x^3 ...

  7. dllMain函数

    Windows在加载DLL的时候,需要一个入口函数,就如同控制台或DOS程序需要main函数.Win32程序需要WinMain函数一样.一些例子中,DLL并没有提供DllMain函数,应用工程也能成功 ...

  8. Unix\Linux | 总结笔记 |文件系统

    1.  ls [选项] [文件]     显示目录中的文件信息 -a    显示全部文件(包括隐藏文件) -l    查看文件的属性.大小等详细信息  (ls -l 详解) -al   查看当前目录中 ...

  9. Bootstrap简介及安装使用

    Bootstrap 简介 什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的 ...

  10. [CTSC2000]丘比特的烦恼

    Description 随着社会的不断发展,人与人之间的感情越来越功利化.最近,爱神丘比特发现,爱情也已不再是完全纯洁的了.这使得丘比特很是苦恼,他越来越难找到合适的男女,并向他们射去丘比特之箭.于是 ...