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 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...
随机推荐
- 丢手帕问题即约瑟夫问题的PHP解法
问题描述:n个人排成一圈.从某个人开始,依次报数,数到m的人被杀死.下一个人重新从1开始报数,数到m的人被杀死.直到剩下最后一个人. 解决思路:从数学角度去看,每一次报数决定谁去死是一个n.m的求余数 ...
- Android中Retrifit使用总结
Android中网络请求框架Retrofit的使用注意事项 1.Retrofit是基于OkHttp网络请求框架的二次封装而已,懂Okhttp的小伙伴,那么Retrofit也就基本都会. 2.Retro ...
- mac apache 2.4的配置
开启vhost 文件 命令行输入 vim /etc/apache2/httpd.conf 找到把前边的# include /private/etc/apache2/extra/httpd-vhost. ...
- 朴素贝叶斯算法下的情感分析——C#编程实现
这篇文章做了什么 朴素贝叶斯算法是机器学习中非常重要的分类算法,用途十分广泛,如垃圾邮件处理等.而情感分析(Sentiment Analysis)是自然语言处理(Natural Language Pr ...
- Exchange管理界面
Exchange有三种管理方式,一个是通过Powershell命令行操作进行管理.Exchange自带的Powershell是在其基础上建的,加入了Exchange管理操作的函数,能够进行另外两种方式 ...
- .net之美学习-前奏
做程序员已经一年多 可是感觉自己的基础不是很好,最近买呢一本.net之美的书,决定开始读着本书,写篇随笔记录一下,后面我会通过读着个书 把里面的知识点记录下,没一个章节付上自己的总结
- 关于Web服务器的认识
马上就要毕业了,也要开始找工作了,大学写了这么多代码了,却没有好好总结一下常用的概念很是遗憾额,就通过这篇博客记录一下我最常用的一些知识好了. 说到Web服务器,有很多文章都介绍的很好,之前看到一篇非 ...
- JS区分移动端和PC
var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger& ...
- Android开发学习路线图
Android开发学习方法: Android是一个比较庞大的体系,从底层的Linux内核到上层的应用层,各部分的内容跨度也比较大.因此,一个好的学习方法对我们学习Android开发很重要. 在此建议, ...
- jquery checked
jquery判断checked的三种方法:.attr('checked): //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false.prop('c ...