首页 > 其他分享 >2018_10_21_03

2018_10_21_03

时间：2024-10-08 20:27:11浏览次数：10  
标签：box 10 moz 容器 03 acticle 2018 flex webkit

box-flex使用说明

1.box-flex属性

box-flex主要让子容器针对父容器的宽度按一定规则进行划分

<acticle>
  <section>01</section>
  <section>02</section>
  <section>03</section>
</acticle>

acticle{
  display: box;
  display: -moz-box;
  display: -webkit-box;

  width: 100%;
  height: 50px;
}
acticle section{
  line-height: 50px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(2){
  background:purple;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(3){
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
  background:green;
}

    必须给父容器wrap定义css属性display:box其子容器才可以进行划分(如果定了display:box则该容器则定义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能通过它的父容器的text-align:center);

    分别给sectionOne、sectionTwo、sectionThree的box-flex设置了3、2、1，也就是说这三个子容器将父容器wrap的宽度600px分为6份，sectionOne占居父结构宽度的3/6即300px，sectionOne占居父结构宽度的2/6即200px，sectionThree占居父结构宽度的1/6即100px。

    以上是按比例数进行划分分配的，如果其中一个子容器或多个子容器设置了固定宽度又会怎样划分那？

    如果其中一个子容器或多个子容器设置了固定宽度，其它子容器没有设置，其计算方式是这样的：子容器如果设置了固定宽度值，该子容器则直接应用设置的宽度值，其它没有设置的则再父容器的宽度基础上减去子容器设置的固定宽度，在剩下的宽度基础上按一定比例进行划分分配。

    请看下面代码:

<acticle>
  <section>01</section>
  <section>02</section>
  <section>03</section>
</acticle>

acticle{
  display: box;
  display: -moz-box;
  display: -webkit-box;

  width: 100%;
  height: 50px;
}
acticle section{
  line-height: 50px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(2){
  background:purple;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(3){
  width:200px;
  background:green;
}

    sectionThree设置了固定宽度为200px，父容器的宽度600px减去改子容器的200px还剩下400px，这400px宽度值则按box-flex设置的值进行划分，sectionOne占居3/4即300px,sectionTwo占居1/4即100px。

    在以上代码的基础上给sectionTwo子容器添加margin:0px 50px使子容器之间产生一定的间隔其宽度又如何进行分配划分的那？接着看

<acticle>
  <section>01</section>
  <section>02</section>
  <section>03</section>
</acticle>

acticle{
  display: box;
  display: -moz-box;
  display: -webkit-box;

  width: 100%;
  height: 50px;
}
acticle section{
  line-height: 50px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(2){
  background:purple;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
  /*添加margin属性*/
  margin:0 50px;
}
acticle section:nth-child(3){
  width:200px;
  background:green;
}

父容器的宽度600px减去设置了子容器的200px基础上再减去100px(2×50)剩下300px，这300px宽度值则按box-flex设置的值进行划分，sectionOne占居3/4即225px,sectionTwo占居1/4即75px。

2.box属性

上面”css3弹性盒子模型之box-flex”将box-flex如何对父容器的宽度进行划分分配讲解完毕，下面在看一下父容器里面的box属性包括哪些box属性，具体属性如下代码所示：

box-orient | box-direction | box-align | box-pack | box-lines

a.box-orient

box-orient(orient译为排列更准确)用来确定父容器里子容器的排列方式，是水平还是垂直。可选属性如下所示：

horizontal | vertical | inline-axis | block-axis | inherit

horizontal、inline-axis说明：

给box设置horizontal或inline-axis属性其效果似乎表现一致，都可将子容器水平排列，具体两者有什么实质差别暂时还没有搞清楚。如果父容器选择horizontal或inline-axis属性对子容器进行水平排列，其是对父容器的宽度进行分配划分。此时如果父容器定义了高度值，其子容器的高度值设置则无效状态，所有子容器的高度等于父容器的高度值；如果父容器不设置高度值，其子容器的高度值才有效并且取最大高度值的子容器的高度。

<article>
  <section>01</section>
  <section>02</section>
  <section>03</section>
</article>

acticle{
  width:100%;
  height:200px;
  display:-moz-box;
  display:-webkit-box;
  display:box;
  -moz-box-orient:horizontal;
  -webkit-box-orient:horizontal;
  /*水平排列*/
  box-orient:horizontal;
}
acticle section{
  line-height: 200px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
  -moz-box-flex:1;
  -webkit-box-flex:1;
  box-flex:1;
}
acticle section:nth-child(2){
  background:purple;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(3){
  width:100px;
  background:green;
}
vertical、block-axis说明：
给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致，都可将子容器垂直排列，具体两者有什么实质差别暂时还没有搞清楚。如果父容器选择vertical或block-axis属性对子容器进行垂直排列，其是对父容器的高度进行分配划分。

此时如果父容器定义了宽度值，其子容器的宽度值设置则无效状态；如果父容器不设置宽度值，其子容器的宽度值才有效并且取最大宽度值的子容器的宽度。

<article>
  <section>01</section>
  <section>02</section>
  <section>03</section>
</article>

acticle{
  width:100%;
  height:200px;
  display:-moz-box;
  display:-webkit-box;
  display:box;
  -moz-box-orient:vertical;
  -webkit-box-orient:vertical;
  /*垂直排列*/
  box-orient:vertical;
}
acticle section{
  line-height: 200px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
  -moz-box-flex:1;
  -webkit-box-flex:1;
  box-flex:1;
}
acticle section:nth-child(2){
  background:purple;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(3){
  height:100px;
  background:green;
}

inherit说明：

inherit属性则是让子容器继承父容器的相关属性。

b.box-direction

box-direction用来确定父容器里的子容器排列顺序，具体属性如下代码所示：

normal | reverse | inherit

normal是默认值

按照HTML文档里结构的先后顺序依次展示。如下代码，如果box-direction设置为normal，则结构依次展示sectionOne、sectionTwo、sectionThree.

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

acticle{
  width:100%;
  height:200px;
  display:-moz-box;
  display:-webkit-box;
  display:box;
  /*设置mormal默认值*/
  -moz-box-direction:normal;
  -webkit-box-direction:normal;
  box-direction:normal;
}
acticle section{
  line-height: 200px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
  -moz-box-flex:1;
  -webkit-box-flex:1;
  box-flex:1;
}
acticle section:nth-child(2){
  background:purple;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(3){
  width:100px;
  background:green;
}

reverse表示反转:

如上面所示设置nomal其结构的排列顺序为sectionOne、sectionTwo、sectionThree；如果设置reverse反转，其结构的排列顺序为sectionThree、sectionTwo、sectionOne.

<article>
  <section>01</section>
  <section>02</section>
  <section>03</section>
</article>

acticle{
  width:100%;
  height:200px;
  display:-moz-box;
  display:-webkit-box;
  display:box;
  /*设置mormal默认值*/
  -moz-box-direction:reverse;
  -webkit-box-direction:reverse;
  box-direction:reverse;
}
acticle section{
  line-height: 200px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
  -moz-box-flex:1;
  -webkit-box-flex:1;
  box-flex:1;
}
acticle section:nth-child(2){
  background:purple;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(3){
  width:100px;
  background:green;
}

c.box-align

box-align表示父容器里面子容器的垂直对齐方式，可选参数如下所示：

start | end | center | baseline | stretch

<article>
  <section>01</section>
  <section>02</section>
  <section>03</section>
</article>

acticle{
  width:100%;
  height:200px;
  display:-moz-box;
  display:-webkit-box;
  display:box;
  /*设置mormal默认值*/
  -moz-box-direction:stretch;
  -webkit-box-direction:stretch;
  box-direction:stretch;
}
acticle section{
  line-height: 100px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
  -moz-box-flex:1;
  -webkit-box-flex:1;
  box-flex:1;
}
acticle section:nth-child(2){
  background:purple;
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;
}
acticle section:nth-child(3){
  width:100px;
  background:green;
}
属性 说明
start 居顶对齐
end 居底对齐
center 居中对齐
stretch 拉伸，拉伸到与父容器等高

d.box-pack

box-pack表示父容器里面子容器的水平对齐方式，可选参数如下所示：

start | end | center | justify

<article>
  <section>01</section>
  <section>02</section>
  <section>03</section>
</article>

acticle{
  width:100%;
  height:200px;
  background: aquamarine;

  display:-moz-box;
  display:-webkit-box;
  display:box;
  
  -moz-box-pack:end;
  -webkit-box-pack:end;
  -o-box-pack:end;
  box-pack:end;
}

acticle section{
  line-height: 100px;
  width: 100px;
  text-align: center;
  color:#fff;
  text-shadow: 1px 1px 1px rgb(0,0,0)
}
acticle section:nth-child(1){
  background:orange;
}
acticle section:nth-child(2){
  background:purple;
}
acticle section:nth-child(3){
  background:green;
}
属性 说明
start 水平居左对齐
end 水平居右对齐
center 水平居中对齐
justify 水平等分父容器宽度（唯一遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）

box-flex小结

用法

 // 父元素
 display: box;
  display: -moz-box;
  display: -webkit-box;
  
  // 子元素
  -moz-box-flex:2;
  -webkit-box-flex:2;
  box-flex:2;

box

box-orient | box-direction | box-align | box-pack | box-lines

box-orient

属性 说明
horizontal 水平排列
vertical 垂直排列
inline-axis 水平排列
block-axis 垂直排列
inherit 继承父元素相关属性

box-direction

说明：用来确定父容器里的子容器排列顺序

属性 说明
normal 默认值
reverse 表示反转
用法：
 
// 父元素
-moz-box-direction:normal;
-webkit-box-direction:normal;
box-direction:normal;

box-align

说明：表示父容器里面子容器的垂直对齐方式

属性 说明
start 默认值
reverse 居顶对齐
end 居底对齐
center 居中对齐
stretch 拉伸，拉伸到与父容器等高
用法：
 
// 父元素
-moz-box-direction:stretch;
-webkit-box-direction:stretch;
box-direction:stretch;

box-pack

说明：box-pack表示父容器里面子容器的水平对齐方式

属性 说明
start 水平居左对齐
end 水平居右对齐
center 水平居中对齐
justify 水平等分父容器宽度（唯一遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）
用法：
 
/* 父元素 */
-moz-box-pack:end;
-webkit-box-pack:end;
-o-box-pack:end;
box-pack:end;

标签：box,10,moz,容器,03,acticle,2018,flex,webkit
From： https://www.cnblogs.com/honghaitao/p/18452421

相关文章

  • 2018_10_21_02
    border-style属性定义及使用说明border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。border-style:dottedsoliddoubledashed;值描述dotted上边框是点状solid右边框是实线double下边框是双线dashed左边框是虚线border-style......
  • 2018_10_21_01
    1px边框问题7种方法解决移动端Retina屏幕1px边框问题在retina屏中实现1pxborder效果下文出自7种方法解决移动端Retina屏幕1px边框问题造成边框变粗的原因其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在......
  • 2018_11_02_02
    原理数据类型window.onload=()=>{vartest1='abcdef';vartest2=123;vartest3=true;vartest4={};vartest5=[];vartest6;vartest7={abcdef:123};vartest8=['abcdef',123];functiontest9(){r......
  • 2018_11_02_03
    匿名函数和闭包在计算机科学中，闭包是函数的非局部变量（自由变量）的引用环境。包含自由变量的函数与为所有这些自由变量提供了变量绑定的环境一起,被称为闭包。以下内容为学习笔记，来自李炎恢老师的课堂纪要。1.匿名函数普通函数functionbox(){//函数名是boxreturn'Lee......
  • 2018_11_02_01
    战舰游戏展示基于vue开发,具体代码请看vue写法<js-2018_11_02_01-index/>原生js代码<divclass="continuar"><tablecellpadding="0"cellspacing="0"id='tab'>tr*7>td*7</table><divclass="e......
  • 2018_10_29_02
    代码收集区分桌面环境与移动平台参考文章:https://segmentfault.com/a/1190000016760627<<<docs/.vuepress/components/js/2018_10_29_01/2018_10_29_01.jselement元素Y轴的scroll事件触发移动平台<<<docs/.vuepress/components/js/2018_10_29_02/html_scroll_mo......
  • 2018_10_28_01
    vscode配置vscode插件AtomOneDarkThemeAutoRenameTagvscode-language-babelChinese(Simplified)LanguagePackforVisualStudioCodeCodeSpellCheckerDockerESLintHopscotch(Official)IntelliJIDEAKeybindingsminapp-vscodePathIntellisensePHPDebu......
  • 2018_10_31_01
    gitcommit提交规范Commitmessage和Changelog编写指南规范你的commitmessage并且根据commit自动生成CHANGELOG.mdCommitmessage的格式主要摘选了基本格式与如何使用<type>(<scope>):<subject>//空一行<body>//空一行<footer>其中，Header是必需的，Bod......
  • 2018_10_22_02
    git~F.A.Q在git的一般使用中，如果发现错误的将不想提交的文件add进入index之后，想回退取消，则可以使用命令：gitresetHEAD<file>...，同时gitadd完毕之后，git也会做相应的提示，比如：引用#Changestobecommitted:#(use"gitresetHEAD<file>..."tounstage)##newfile:Test......
  • 10.8 模拟赛（2023 CSP-S 十连测 #5）
    炼石计划10月28日CSP-S十连测#5【补题】-比赛-梦熊联盟(mna.wang)复盘T1秒了。30min。T2题目越短越难。但是链的是经典题目，写了。小样例太水，大样例太大，不方便猜结论。于是先写暴力然后自己造样例。模拟了五六组感觉可以按照lca的深度降序排序，然后能选就选。这......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99