CSS之flex布局
- <!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布局的更多相关文章
- CSS的flex布局(转载)
我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了. flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布 ...
- css的flex布局调试
学习经验-css的flex布局 今天遇到一个小问题 在给三个div布局时,设置父元素display:flex 此时三个div的宽度均为50%,他们并没有超出屏幕的宽度,还是撑满了父元素. 为什么呢? ...
- 通过游戏来学习CSS的Flex布局
在复习Flex 布局的时候发现的了几个有趣的小游戏,在这里分享并记录几个有难度的答案 1. Flexbox Froggy 通过调整CSS样式来使各种青蛙回到对应的荷叶上,游戏默认难度为Beginner ...
- “妄”眼欲穿-CSS之flex布局和边框阴影
妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...
- 详解CSS的Flex布局
本文由云+社区发表 Flex是Flexible Box 的缩写,意为"弹性布局",是CSS3的一种布局模式.通过Flex布局,可以很优雅地解决很多CSS布局的问题.下面会分别介绍容 ...
- CSS之FLex布局介绍
网页布局(layout)是CSS的一个重点应用. img 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如, ...
- CSS之Flex 布局:语法篇
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如 ...
- CSS之Flex 布局
Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些 ...
- CSS的flex布局和Grid布局
一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...
- 微信小程序CSS之Flex布局
转载:https://blog.csdn.net/u012927188/article/details/83040156 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...
随机推荐
- LeetCode 104. Maximum Depth of Binary Tree
Problem: Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along ...
- 25个 Git 进阶技巧
[ 原文] http://www.open-open.com/lib/view/open1431331496857.html 我已经使用git差不多18个月了,觉得自己对它应该已经非常了解.然后来自G ...
- Ue4的UE_LOG
说明:本文为Wiki上的RAMA大神文章的大致翻译 游戏模式: 在游戏模式下,你需要在游戏的快捷方式后面加 -Log,才会在游戏中显示. 编辑器模式(Play In Editor): 你可以在Outp ...
- MySQL学习笔记01_数据库基础知识
01_1 mysql数据库启动与停止 以<管理员权限>启动cmd: 输入net stop mysql停止mysql服务: 输入net start mysql启动mysql服务: 输入mys ...
- 【转】SHELL中的IFS详解
转自:http://smilejay.com/2011/12/bash_ifs/ 在bash中IFS是内部的域分隔符,manual中对其的叙述如下: IFS The Internal Field Se ...
- iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸
iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸 iPhone界面尺寸 设备 分辨 ...
- js实现输入框数量加减【转】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML5 WebSocket
在WebSocket API中,浏览器和服务器只需要做一个握手动作,然后,浏览器和服务器之间就形成一条快速通道,两者之间就可以直接进行数据传送,这一个功能可以应用到"字幕",自己做 ...
- 移动前端不得不了解的html5 head 头标签
本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...
- C++ 编写DLL文件给易语言调用
摸索了两天了,终于解决了所有问题,在此跟大家分享. 需要三个文件,dll_demo.h.dll_demo.cpp.dll_dome.def 直接上代码: 头文件如下: #ifndef _DLL_DEM ...