学习关于display :flex 布局问题!

  • 很多人不明白这个display:flex是到底是什么东西,如何使用的  。

1.什么是display:flex呢?

答:flex是 flexible  box的缩写,意为弹性布局 ;这个东西的引入,为盒模型提供了最大的灵活性!可以相应式的实现各种页面的布局。

 

基本概念

采用flex布局的元素,称为flex容器(flex   container),简称容器。    在这个容器中默认存在两个轴:水平方向的主轴(main axis)和 垂直方向上的交叉轴(cross axis)。

图: (摘自:他人博客)

以下6个属性设置在容器上:


    •  flex-direction   容器项目的排列方向(默认是横向排列)
    • flex-wrap      容器内项目的换行方式
    • flex-flow      flex-direction 和 flex-wrap 属性的复合属性。
    • justify-content   项目在主轴上对齐样式
    • align-item  项目在交叉轴上如何对齐
    • align-content   定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用

 


 注意:    如果元素不是弹性盒对象的元素,则flex-flow 属性是不起作用的;

 

 

属性值

用法

 

<!DOCTYPE html>
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Page Title</title><style>.father {width: 500px;height: 100px;background-color: red;display: flex;flex-flow:row;}.box1 {flex: 3;background: blue;}.box2{flex: 2;background: pink;}</style>
</head><body><div class="father"><div class="box1"></div><div class="box2"></div></div>
</body></html>

 

 

 

 以上仅是我个人初步学习!后期学习在进行更新!  ~~~~~~~~~~~

 

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hbbbcab&title=学习关于display :flex 布局问题!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370861.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

note同步不及时 one_一辆理想ONE又“跪了”?理想官方紧急发文回应

汽车行业关注(autochat.com.cn)10月16日报道——10月15日&#xff0c;有网友在社交媒体上发布视频&#xff0c;从视频可以看到&#xff0c;一辆理想ONE在遭遇事故后&#xff0c;左前轮脱落在车外疑似断轴,从视频未能判定是断轴引起的事故&#xff0c;还是事故引起的断轴。针对该…

Skywalking 中 Agent 自动同步配置源码解析

文章目录 前言正文实现架构实现模型OAP 同步 ApolloConfigWatcherRegisterConfigChangeWatcher Agent 侧 前言 本文代码 OAP 基于 v9.7&#xff0c;Java Agent 基于 v9.1&#xff0c;配置中心使用 apollo。 看本文需要配合代码“食用”。 正文 Skywalking 中就使用这种模型…

华为5720设置静态路由不通_【干货分享】交换机与路由器在环路中的处理机制了解一下!...

点击蓝字关注我们-今天小盟带大家来讨论一下交换机与路由器在环路中的处理机制-01基础配置1---如图配置路由器各接口地址&#xff0c;AR-2为PC-1的网关路由器2---AR-1配置静态默认路由&#xff0c;下一跳地址指向AR-2&#xff1b;[AR-1]ip route-static 0.0.0.0 0 12.1.1.2AR-2…

VisualVM介绍使用

1 打开VisualVM&#xff08;这个工具放在JDK安装目录的bin目录下&#xff0c;双击jvisualvm.exe即可打开&#xff09;&#xff0c;如下图所示 以VisualVM自身为例&#xff0c;VisualVM本身也是一个java程序&#xff0c;当然也而已用VisualVM来分析 2 概述页面主要显示程序…

Java功能的适用性

Java语言和标准库功能强大&#xff0c;但功能强大&#xff0c; 责任重大 。 一方面看到很多用户代码滥用或滥用稀有的Java功能&#xff0c;另一方面却完全忘记了大多数基本功能之后&#xff0c;我决定撰写此摘要。 这不是每个Java开发人员都应该探索&#xff0c;了解和使用的要…

台达b3伺服modbus通讯_【数控系统】台达伺服压机控制灵活 精准压合满足各种工序需求...

引言压机是一种利用压力改变工件形状的机械设备。随着制造业少量多样与客制化的日趋发展&#xff0c;压机的的优势逐渐显现&#xff0c;在汽车、五金与电子制造等产业中的应用不断增多。传统压机在使用操作上耗费人力并需要诸多压机元件才能完整运作&#xff0c;维修成本高&…

yolov4Linux,基于Darknet的YOLOv4目标检测

目录一、Windows环境下的YOLOv4目标检测1、环境配置环境准备&#xff1a;Win10、CUDA10.1、cuDNN7.65、Visual Studio 2019、OpenCV 3.4(1)Visual Studio2019企业版安装(3)下载并安装CUDA10.1&#xff0c;下载安装cuDNN7.65对于cudnn直接将其解开压缩包&#xff0c;然后需要将b…

二元置信椭圆r语言_医学统计与R语言:圆形树状图(circular dendrogram)

微信公众号&#xff1a;医学统计与R语言如果你觉得对你有帮助&#xff0c;欢迎转发输入1&#xff1a; "ggraph")结果1&#xff1a; name 输入2&#xff1a; <- graph_from_data_frame(myedges1, verticesmyvertices,directed T)ggraph(mygraph, layout dend…

Java:检查器框架

我在JavaOne 2012上 了解的有趣的工具之一是Checker Framework 。 Checker Framework的网页之一 指出 &#xff0c;Checker Framework“增强了Java的类型系统&#xff0c;使其更强大&#xff0c;更有用”&#xff0c;从而使软件开发人员“能够检测并防止Java程序中的错误”。 查…

南岸焊接机器人厂_造船三部高效焊接工艺技术年鉴

为了提升公司高效焊自动化率&#xff0c;实现降本增效目标&#xff0c;造船事业三部积极响应公司领导号召&#xff0c;充分挖掘自身资源&#xff0c;2020年&#xff0c;在高效焊接技术、设备开发研究等方面&#xff0c;不断创新、敢于突破&#xff0c;获取了多项焊接新技术、新…

线性回归csv数据集_测试数据科学家线性回归的30个问题

你的目标是数据科学家吗&#xff1f;那你对线性回归了解有多深入呢&#xff0c;下面的30道题&#xff0c;可以帮助你或者测试别人是否真的达到的数据科学家的水平&#xff0c;关注回复&#xff0c;答案在评论区&#xff1a;1)是非题&#xff1a;线性回归是一种受监督的机器学习…

dw空心圆项目符号_如何懂建筑施工图?搞懂这些符号解析,耐下性子研究不会学不会...

施工图纸一个建筑方向&#xff0c;是房屋建筑的依据&#xff0c;更是一种工程语言&#xff0c;它能够明确的规定出我们建造出怎样的建筑&#xff0c;看懂它是入行基础。当然建筑图包含的因素比较多&#xff0c;有具体的建筑符号&#xff0c;尺寸、做法以及技术要求都在里面&…

canvas学习和滤镜实现

最近学习了 HTML5 中的重头戏--canvas。利用 canvas&#xff0c;前端人员可以很轻松地、进行图像处理。其 API 繁多&#xff0c;这次主要学习常用的 API&#xff0c;并且完成以下两个代码&#xff1a;实现去色滤镜实现负色(反色)滤镜 欢迎入群&#xff1a;857989948 。IT 技术深…

android代码混淆作用,Android分享:代码混淆那些事

1) 前言ProGuard是一个开源的Java代码混淆器。它可以混淆Android项目里面的java代码&#xff0c;对的&#xff0c;你没看错&#xff0c;仅仅是java代码。它是无法混淆Native代码&#xff0c;资源文件drawable、xml等。2) ProGuard作用压缩: 移除无效的类、属性、方法等优化: 优…

施工部署主要不包括_建筑工程施工方案及培训实例

[南京]大型土石方工程施工方案本资料为[南京]大型土石方工程施工方案格&#xff0c;共43页。内容简介&#xff1a;本工程位于南京化工园内&#xff0c;扬子玉带扬巴路附近&#xff0c;工程项目为江苏成品油管道配设施扬子玉带油库套油库工程&#xff0c;由中国石化股份有限公司…

java第六次作业

《Java技术》第六次作业 &#xff08;一&#xff09;学习总结 1.用思维导图对本周的学习内容进行总结。 2.当程序中出现异常时&#xff0c;JVM会依据方法调用顺序依次查找有关的错误处理程序。可使用printStackTrace 和getMessage方法了解异常发生的情况。阅读下面的程序&#…

华为鸿蒙不再孤,华为鸿蒙OS系统不再孤单!又一款国产系统启动内测:再掀国产替代化...

【5月10日讯】相信大家都知道&#xff0c;备受广大花粉们期待的鸿蒙OS系统终于开始推送公测版本了&#xff0c;并且适配机型也开始不断地增多&#xff0c;而根据华为官方最新消息&#xff0c;华为鸿蒙OS系统将会在6月份开始大规模推送正式版鸿蒙系统&#xff0c;这无疑将会成为…

CSS 水平垂直居中

方法一&#xff1a; 容器确定宽高&#xff1a;知识点&#xff1a;transform只能设置在display为block的元素上。 <head> <meta charset"UTF-8"> <title>Title</title> <style type"text/css"> #container{…

linux怎么进入文件夹_Linux基础命令《上》

上一节介绍了VMware中安装centos7以及克隆系统&#xff0c;之中用到的几个命名还都是开发不常用的&#xff0c;这节课就准备讲解一下入门的Linux命名&#xff0c;都是日常使用的。首先呢&#xff0c;我们进入系统后&#xff0c;得先知道我是谁&#xff0c;我在哪儿&#xff1f;…

UML学习(一)-----用例图

1、什么是用例图 用例图源于Jacobson的OOSE方法&#xff0c;用例图是需求分析的产物&#xff0c;描述了系统的参与者与系统进行交互的功能&#xff0c;是参与者所能观察和使用到的系统功能的模型图。它的主要目的就是帮助开发团队以一种可视化的方式理解系统的功能需求&#xf…