css线条伸缩_伸缩布局(CSS3)

CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。

主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向

侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的

方向:默认主轴从左向右,侧轴默认从上到下

主轴和侧轴并不是固定不变的,通过flex-direction可以互换。

Flex布局的语法规范经过几年发生了很大的变化,也给Flexbox的使用带来一定的局限性,因为语法规范版本众多,浏览器支持不一致,致使Flexbox布局使用不多

2、各属性详解****

1.flex子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配

min-width 最小值 min-width: 280px 最小宽度 不能小于 280

max-width: 1280px 最大宽度 不能大于 1280

2.flex-direction调整主轴方向(默认为水平方向)

flex-direction: column 垂直排列

flex-direction: row 水平排列

3、justify-content调整主轴对齐(水平对齐)

子盒子如何在父盒子里面水平对齐

值描述白话文

flex-start

默认值。项目位于容器的开头。

让子元素从父容器的开头开始排序但是盒子顺序不变

flex-end

项目位于容器的结尾。

让子元素从父容器的后面开始排序但是盒子顺序不变

center

项目位于容器的中心。

让子元素在父容器中间显示

space-between

项目位于各行之间留有空白的容器内。

左右的盒子贴近父盒子,中间的平均分布空白间距

space-around

项目位于各行之前、之间、之后都留有空白的容器内。

相当于给每个盒子添加了左右margin外边距

4、align-items调整侧轴对齐(垂直对齐)

子盒子如何在父盒子里面垂直对齐(单行)

值描述白话文

stretch

默认值。项目被拉伸以适应容器。

让子元素的高度拉伸适用父容器(子元素不给高度的前提下)

center

项目位于容器的中心。

垂直居中

flex-start

项目位于容器的开头。

垂直对齐开始位置 上对齐

flex-end

项目位于容器的结尾。

垂直对齐结束位置 底对齐

5、flex-wrap控制是否换行

当我们子盒子内容宽度多于父盒子的时候如何处理

值描述

nowrap

默认值。规定灵活的项目不拆行或不拆列。 不换行,则 收缩(压缩) 显示 强制一行内显示

wrap

规定灵活的项目在必要的时候拆行或拆列。

wrap-reverse

规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。

6、flex-flow是flex-direction、flex-wrap的简写形式

flex-flow: flex-direction  flex-wrap;

白话记: flex-flow: 排列方向 换不换行;

两个中间用空格

例如:

display: flex;

/* flex-direction: row;

flex-wrap: wrap; 这两句话等价于下面的这句话*/

flex-flow: column wrap; /* 两者的综合 */

7、align-content堆栈(由flex-wrap产生的独立行)多行垂直对齐方式齐

align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。

必须对父元素设置自由盒属性display:flex;,并且设置排列方式为横向排列flex-direction:row;并且设置换行,flex-wrap:wrap;这样这个属性的设置才会起作用。

值描述测试

stretch

默认值。项目被拉伸以适应容器。

center

项目位于容器的中心。

flex-start

项目位于容器的开头。

flex-end

项目位于容器的结尾。

space-between

项目位于各行之间留有空白的容器内。

space-around

项目位于各行之前、之间、之后都留有空白的容器内。

8、order控制子项目的排列顺序,正序方式排序,从小到大

用css 来控制盒子的前后顺序。 用order 就可以

用整数值来定义排列顺序,数值小的排在前面。可以为负值。 默认值是 0

order: 1;

此知识点重在理解,要明确找出主轴、侧轴、方向,各属性对应的属性值

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

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

相关文章

android添加时间,添加加载时间记录函数

记录游戏执行加载的时间非常重要,原因有两个:避免在加载时污染帧时间数据。分析加载时间,看看加载时间何时何地超过可接受的范围。加载事件可以具有关联的元数据:typedef struct TuningFork_LoadingTimeMetadata {enum LoadingSta…

mysql字段uuid_Java生成UUID 与 MySQL数据库如何生成uuid数据

一、Java1.UUID 简介UUID 含义是通用唯一识别码 (Universally Unique Identifier),这是一个软件建构的标准。也是被开源软件基金会 (Open Software Foundation, OSF) 的组织应用在分布式计算环境 (Distributed Computing Environment, DCE) 领域的一部分。UUID 的目…

android 绕过root检测,公主连结怎么绕过root检测 绕过root检测方法一览

公主连结刷初始怎么绕过root检测呢?很多小伙伴想刷初始可是经常被root检测,有没有什么办法才能绕过检测呢?实机可以用magisk自带的hide功能,xposed框架可以选择rootcloak,ANRC在x86半残废可能能用,Android版只是检测su二进制文件是否存在&a…

android绘制环形进度_Android实现环形进度条代码

先上效果图:自定义控件:AttendanceProgressBar代码如下:public class AttendanceProgressBar extends View {// 画圆环底部的画笔private Paint mCirclePaint;// 画圆环的画笔private Paint mRingPaint;// 画字体的画笔private Paint mTextPa…

鸿蒙后的时期有什么,鸿蒙系统什么时候上市 华为鸿蒙系统有多厉害?

由于谷歌停止与华为的部分合作,华为的绝密武器“鸿蒙系统”也随之曝光。按照余承东的说法,早在七年之前鸿蒙系统已经开始研发,时至今日鸿蒙系统终于有机会上市,成为华为的新操作系统。鸿蒙系统被誉为备胎计划,此系统就…

centos7系统引导自动重启_centos7 windows7 双系统重新构建引导和启动顺序

安装centos后无法引导启动windows7的解决方法在电脑Windows7系统上安装Centos7,安装后找不到Windows7引导菜单。原因:因为CentOS 7已采用新式的grub2系统,所以需要进入/boot/grub2目录后使用vi编辑grub.cfg文件。解决方法一:修改C…

android确认密码代码,Android自定义View实现验证码or密码输入框

前言最近项目中有支付功能,用户输入密码时要类似微信支付密码输入框的样式,本想直接copy网上的,但设计姐姐总是对样式挑三拣四,抽空自己自定义了一个,无奈之下抽空自定义了个,并把它贴到GitHub上供网友们参…

一阶广义差分模型_广义差分法的eviews软件实现

广义差分法的eviews软件实现 1,计量经济学,第六章 自 相 关,2,引子t检验和F检验一定就可靠吗,研究居民储蓄存款 与居民收入 的关系 用普通最小二乘法估计其参数,结果为 (1.8690) 0.0055 14.9343 64.2069,3,检验结果表明回归系数的标准误差非常小,t 统计量…

华为鸿蒙再次公测,华为鸿蒙开启第二轮公测,新增7款机型,有你的吗?

原标题:华为鸿蒙开启第二轮公测,新增7款机型,有你的吗?华为鸿蒙操作系统,相信这是很多人都非常期待的操作系统,这个操作系统经过各方评测之后,得到的反馈都要远比华为此前所搭载的基于安卓开发的…

同行不支持鸿蒙系统,鸿蒙系统虽好,但也需要国内同行支持

原标题:鸿蒙系统虽好,但也需要国内同行支持鸿蒙系统将在不久正式推出,但是鸿蒙系统虽好,但也离不开国内同行的支持。鸿蒙系统的细节透露后,被广大数码爱好者所重视。作为一款不同于苹果IOS以及安卓系统外的其他手机系统…

linux主机开放ftp、http服务_Linux系统与Windows系统哪个好呢(一)

当Windows与Linux作为VPS云主机操作系统的对比时,需要专注于小企业主最相关的因素,一个明显的赢家出现了,现在我们来看看吧。Linux与Windows的比较:任何虚拟主机操作系统都应该快速且稳定,但当企业选择VPS主机时&#…

国内厂商对鸿蒙系统的态度,鸿蒙系统4月上线,国内手机厂商态度很关键!小米、中兴出乎意料...

前段时间,华为举行了新品发布会,在这个发布会上,华为宣布了两件事情,第一就是华为全新的折叠屏手机Mate X2正式亮相了,而第二件事情更加让人惊喜,余承东已经确认,华为的鸿蒙系统将会在4月份上线…

hal库开启中断关中断_stm32的HAL库开发学习笔记之外部中断

外部中断中断线————EXTI线0~15(对应外部IO口的输入中断)每个IO口都可以作为外部中断输入每个中短线可以独立的配置触发方式(上升沿,下降沿,双边沿),触发/屏蔽,专用状态位。GPIO与中断线映射关系EXTI0->PA0,PB0,PC0,……PI0…

kindle的xray怎么用_Xray使用的一些经验分享

前言xray被动扫描器,是我目前个人挖洞过程中,感觉最好用的一款扫描器。这篇博客,分享一下我使用xray的一些小心得吧官方github:https://github.com/chaitin/xray官网文档:https://xray.cool/xrayburp的使用普通使用配置…

字符串属于python有序序列、支持双向索引_字符串属于Python有序序列,和列表、元组一样都支持双向索引。...

【多选题】框架梁上部纵筋包括哪些( )【单选题】钢筋半圆弯钩的长度应为下列哪项。【单选题】检验蔬菜质量的主要指标是【判断题】新鲜鳓鱼初加工时要去鳞,因为鳓鱼腥味较大【判断题】低级格式化可以彻底消除硬盘坏道,使硬盘重获新生。【单选题】.鲜草菇呈____色,以菌苞未破,呈…

移动设备 (Android),How-To Geek正在寻找专注于移动设备(Android,iOS,可穿戴设备等)的作家 | MOS86...

随着移动技术的发展和扩展,我们的覆盖范围也在不断扩大。 我们正在寻找经验丰富,专业和知识渊博的自由作家,以帮助将我们的移动内容提高到一个新的水平。我们正在寻找经验丰富的作家来帮助报道有关移动技术的新闻和社论解说。 理想的人选将精…

sh执行文件 参数传递_Shell脚本传参数方法总结

一、接收固定长度的参数[rootsvn shell_example]# cat params.sh#!/bin/bash#传参测试脚本echo "My name is basename $0 -I was called as $0"echo "My first parameter is : $1"echo "My second parameter is : $2"空参数执行[rootsvn shell_e…

android mdpi对应哪一个屏幕,android 常见分辨率(mdpi、hdpi 、xhdpi、xxhdpi )及屏幕适配...

1 Android手机目前常见的分辨率1.1 手机常见分辨率:4:3VGA 640*480 (Video Graphics Array)QVGA 320*240 (Quarter VGA)HVGA 480*320 (Half-size VGA)SVGA 800*600 (Super VGA)5:3WVGA 800*480 (Wide VGA)16:9FWVGA 854*480 (Full Wide VGA)HD 1920*1080 High D…

datatable筛选条件_C#利用DataView的RowFilter对DataTable进行查询筛选

1、筛选某个字段满足指定条件的记录DataView dv myDs.Tables[0].DefaultView;dv.RowFilter "Year1427";gv.DataSource dv;Year这个是myDs.Tables[0]的一个字段。这样就是只有Year的值等于1427的记录绑定gv控件。2、用RowFilter对指定列进行模糊匹配我们都知道sql语…