<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <div class="box">

    <div class="item item1">1</div>

    <div class="item item2">2</div>

    <div class="item item3">3</div>

    <div class="item item4">-1</div>

    <div class="item item5">-3</div>

    <div class="item item6">0</div>

  </div>

  <span class="test"></span>

</body>

</html>
.box {

  width:400px;

  height:104px;

  border: 1px solid #000000;

  display: -webkit-flex;

  display: flex;

  /*float, clear, vertical-align失效*/

  /*

  flex-direction: row;

  flex-wrap: wrap;

  */

  /*flex-flow是上面两个的合体*/

  flex-flow: row wrap;

  /*主轴*/

  justify-content: space-around;

  /*交叉轴*/

  align-items: center;

  /*多轴*/

  align-content: center;

}

.box .item {

  width: 50px;

  height: 50px;

  border:1px solid pink;

  font-size: 16px;

  order:;

  /*空间不够的时候，项目等比缩小*/

  flex-shrink:;

}

.box .item3 {

  /*占据两份*/

  flex-grow:;

  align-self: flex-end;

}

.test {

  /*内联元素也可以做flex布局*/

  display: -webkit-inline-flex;

  display: inline-flex;

}

运行结果：

CSS之flex布局的更多相关文章

  1. CSS的flex布局(转载)

    我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了. flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布 ...

  2. css的flex布局调试

    学习经验-css的flex布局 今天遇到一个小问题 在给三个div布局时,设置父元素display:flex 此时三个div的宽度均为50%,他们并没有超出屏幕的宽度,还是撑满了父元素. 为什么呢? ...

  3. 通过游戏来学习CSS的Flex布局

    在复习Flex 布局的时候发现的了几个有趣的小游戏,在这里分享并记录几个有难度的答案 1. Flexbox Froggy 通过调整CSS样式来使各种青蛙回到对应的荷叶上,游戏默认难度为Beginner ...

  4. “妄”眼欲穿-CSS之flex布局和边框阴影

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...

  5. 详解CSS的Flex布局

    本文由云+社区发表 Flex是Flexible Box 的缩写,意为"弹性布局",是CSS3的一种布局模式.通过Flex布局,可以很优雅地解决很多CSS布局的问题.下面会分别介绍容 ...

  6. CSS之FLex布局介绍

    网页布局(layout)是CSS的一个重点应用. img 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如, ...

  7. CSS之Flex 布局：语法篇

    网页布局(layout)是 CSS 的一个重点应用. ​ 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如 ...

  8. CSS之Flex 布局

    Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些 ...

  9. CSS的flex布局和Grid布局

    一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...

  10. 微信小程序CSS之Flex布局

    转载:https://blog.csdn.net/u012927188/article/details/83040156 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...

随机推荐

  1. 将一个字符串中的大写字母转换成小写字母，小写字母转换成大写字母（java）

    背景:刚刚学到java的String和StringBuffer类,遇到如标题所示的题. 要求:必须要用到String类的toUpperCase方法和toLowerCase方法 思路:用到StringB ...

  2. 做 Web 开发少不了这些的

    抱歉,似乎有些标题党了.最近做服务器的热备,整理了些李纳斯工具的适用方法.看看还有不错的. 基本命令 sleep 500 暂停 ctrl + z 暂停 progress & 后台运行 jobs ...

  3. 20161022 NOIP模拟赛 T1 解题报告

    旅行者问题 [问题描述] lahub是一个旅行者的粉丝,他想成为一个真正的旅行者,所以他计划开始一段旅行.lahub想去参观n个目的地(都在一条直道上).lahub在起点开始他的旅行.第i个目的地和起 ...

  4. 应用TortoiseGit为github账号添加SSH keys

    每次同步或者上传代码到githun上的代码库时,需要每次都输入用户名和密码,这时我们设置一下SSH key就可以省去这些麻烦了.若果使用TortoiseGit作为github本地管理工具,Tortoi ...

  5. mac和virtualbox虚拟机共享

    virtualbox安装增强工具 打开虚拟机,devices—shared folders—settings 打开窗口,选择“共享文件夹”,点击“带加号的文件夹图标”, 点击文件夹路径,选择其它,然后 ...

  6. Ansible-playbook批量部署，更新war脚本，可以再完善----后续再update

    - name: install tomcat admin hosts: all sudo: True vars: war_file: /root/test.war tomcat_root: /data ...

  7. 关于MVC的开源商城 Nop之闲聊

    nopcommerce是国外的一个高质量的开源b2c网站系统,基于EntityFramework4.0和MVC3.0,使用Razor模板引擎,有很强的插件机制,包括支付配送功能都是通过插件来实现的,基 ...

  8. 学习Nodejs之mysql

    学习Nodejs连接mysql数据库: 1.先安装mysql数据库 npm install mysql 2.测试连接数据库: var sql = require("mysql"); ...

  9. ThreadLocal对象使用过程中容易陷入的坑

    ThreadLocal对象帮助我们管理线程内的对象,保证对象在线程之间是相互隔离的. 今天碰到的坑是这样的: index01.html页面加载的时候会发送一次a请求,然后点击附件上传的时候会发送上传请 ...

  10. 20145337 GDB调试汇编堆栈过程分析

    20145337 GDB调试汇编堆栈过程分析 测试代码 #include<stdio.h> short addend1 = 1; static int addend2 = 2; const ...