整理CSS中display flex(布局利器)
关于display:flex布局,有人了解颇深,我也是看着别人的东西学习的。
display:flex的布局是什么、基本概念之类的我根本就不了解,只会用。每次看到概念之类的东西,我都是扫一眼就过去。
第一个属性和用法:flex-direction
我了解的方法有4个:row(水平排列)、row-revese(水平反向排列)、column(垂直排列)、column-reserve(垂直反向排列)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width:300px;border:1px solid red;display: flex;flex-direction: row;">
<div style="width: 100px;height: 100px;background-color: black;"></div>
<div style="width: 100px;height: 100px;background-color: green;"></div>
<div style="width: 100px;height: 100px;background-color: yellow;"></div>
<div style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
</body>
</html>
上面的代码和效果图是属性为row时的效果
注意:虽然是设置好的宽度,但是父容器只有300px,子div没法达到100px,而是适应父容器
只需要将 flex-direction: row代码替换成 flex-direction: row-revese 或者 flex-direction: column 或则 flex-direction: column-reserve,就可以得到不同的效果
下面是效果图:
row-revese
-------
column
-------
column-reverse
-------
第二个属性和用法:flex-wrap
这是换行属性:nowrap(不换行)、wrap(换行)、wrap-reverse(方向换行)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width:300px;border:1px solid red;display: flex;flex-wrap: wrap;">
<div style="width: 100px;height: 100px;background-color: black;"></div>
<div style="width: 100px;height: 100px;background-color: green;"></div>
<div style="width: 100px;height: 100px;background-color: yellow;"></div>
<div style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
</body>
</html>
这是换行的代码和效果图
-------
将属性 flex-wrap: wrap 替换成 nowrap(不换行)、wrap-reverse(方向换行)得到的效果图如下:
nowrap
-----
wrap-reverse
---------
第三个属性和用法:justify-content
包含的属性有: justify-content: start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline
(这些属性都是抄别人的)
flex-start(默认值):左对齐;
左对齐flex-end:右对齐;
右对齐center:居中;
- space-between:两端对齐,项目之间间隔相等;
- space-around:每个项目两侧的间隔相等,即项目之间的间隔比项目与边框的间隔大一倍。
其他属性:如align-item、align-content、justify-content 请查看原文:https://www.cnblogs.com/qingchunshiguang/p/8011103.html
整理CSS中display flex(布局利器)的更多相关文章
- 使用css中的flex布局弹性手风琴效果
不多说,直接上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- HTML/CSS:display:flex 布局教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- CSS中的flex布局
1.flex 布局的概念 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 ...
- CSS中display对布局的影响以及元素display的默认值
比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level):而span元素的默认display属性值为“inline”,称为“行内”元素.
- 1.display:flex布局笔记
/*display:flex布局方式主要运用于垂直居中的效果*/ 一.Flex译为Flexible Box(弹性盒子),任何一个容器都可以指定为Flex布局 注:设置为Flex布局之后,子元素的flo ...
- CSS中常见的布局
一.css中常见的布局有哪些? (1)两列布局 (2)三列布局 (3)弹性布局 (4)圣杯布局 (5)双飞翼布局 二.具体实现 (1)两列布局 https://www.cnblogs.com/qin ...
- css之display:inline-block布局
css之display:inline-block布局 更好的排版-->查看原文 1.解释一下display的几个常用的属性值,inline , block, inline-block ●inli ...
- display:flex 布局教程,弹性布局!
display:flex 布局教程 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...
- css之display:inline-block布局--转
css之使用display:inline-block来布局 css之display:inline-block布局 1.解释一下display的几个常用的属性值,inline , block, in ...
随机推荐
- python基础之语句字符串
python的种类: jpython java写的python ironpython c#写的python cpython ...
- org.apache.hadoop.security.AccessControlException: Permission denied: user=
这个是权限问题,可以配置下,然后重启hadoop集群解决,目前简单的解决方式是: 在 hdfs-site.xml 总添加参数: <property> <name>dfs. ...
- python bmp转jpg 且灰度图转彩色
今天在简书,上看到了一个 bmp转jpg的代码,便记录一下. # coding:utf-8 import os from PIL import Image # bmp 转换为jpg,灰度图转RGB d ...
- Java基础(命令行操作、注释及API、)
一.常用的dos命令. dir:列出当前目录下的文件及文件夹 md:创建目录 rd:删除目录 cd:进入到指定目录 cd..:退出到上一级目录 cd\:退出到根目录 del:删除文件 exit:退出d ...
- python测试开发django-1.开始hello world!
前言 当你想走上测试开发之路,用python开发出一个web页面的时候,需要找一个支持python语言的web框架.django框架有丰富的文档和学习资料,也是非常成熟的web开发框架,想学pytho ...
- python note 16 re模块的使用
1.re模块(#regex) # 查找 # findall : 匹配所有 每一项都是列表中的一个元素 import re ret = re.findall('\d+','dawdawd154wadwa ...
- gitlab 与 jenkins 关联
一.搭建 gitlab :https://www.cnblogs.com/carriezhangyan/p/10729158.html 二.搭建jenkins :https://www.cnblogs ...
- 怎么清理Linux系统磁盘空间占用大:/dev/xvda1
1.首先查看磁盘占用情况 df -h Filesystem Size Used Avail Use% Mounted on/dev/xvda1 20G 18G 621M ...
- JavaSE基础知识(5)—面向对象(方法的重写与重载)
一.重写 1.说明 子类对继承过来的父类的方法进行改造,这种现象称为方法的重写或覆盖或覆写(Override) 2.要求 方法签名完全一致,jdk5.0之后,允许返回类型可以是子类类型,权限修饰符可以 ...
- 【转】RabbitMQ基础——和——持久化机制
这里原来有一句话,触犯啦天条,被阉割!!!! 首先不去讨论我的日志组件怎么样.因为有些日志需要走网络,有的又不需要走网路,也是有性能与业务场景的多般变化在其中,就把他抛开,我们只谈消息RabbitMQ ...