flex ios margin 问题 ios flex布局

转载

云端筑梦师 2023-08-18 17:03:13

文章标签 flex ios margin 问题 css html5 html 默认值 文章分类 iOS 移动开发

前言

响应式布局是兼容性较差的一种布局，但是随着时代的发展，手机端的兼容性问题基本不需要去担心，因此对应的一系列兼容性问题可以忽略，响应式布局中的flex布局成为了非常方便的布局手段。因此，我们应该去认真的学习和理解，flex布局的用法和他们的属性，有什么样的用法，可以实现什么样的效果。

flex ios margin 问题 ios flex布局_html

一、flex布局原理

“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。采用flex布局的元素，称为flex容器(flexcontainer)，简称“容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。flex通过控制他的子容器，实现分配内容的效果。

flex的语法是这样使用的：

div { display：flex；}

给父盒子设置display：flex；之后，可以设置一些父盒子的父类属性，然后实现你想看到的排列效果。之后可以给子盒子设置自己的属性，实现分配比例调整的效果。总得来说，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式，实现容器控制盒子的能力。不过需要注意两个问题：

当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性布局=flex布局

二、父类的常用属性

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

1.flex-direction

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，水平向下

flex-direction属性决定主轴的方向（即项目的排列方向），语法就是flex-direction：row；。
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的：

row：默认值从左到右
row-reverse：从右到左
column：从上到下
column-reverse：从下到上

flex ios margin 问题 ios flex布局_css_02

2.justify-content

justify-content属性定义了项目在主轴上的对齐方式，使用这个属性之前一定要确定好主轴是哪一个，这样使用的时候才会看出对应的效果。下面的是他的属性值：

flex-start：默认值从头部开始，如果主轴是下周，则从左到右
flex-end：从尾部开始排列
center：在主轴居中对齐（如果主轴是x轴则水平居中）
space-around：平分剩余空间
space-between：先两边贴边，再平分剩余空间（重要）

flex ios margin 问题 ios flex布局_flex ios margin 问题_03

3. flex-wrap

默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。

nowrap：默认值，不换行。
wrap：换行。

flex ios margin 问题 ios flex布局_css_04

4.align-items

该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项（单行）的时候使用

flex-start：默认值，从上到下。
flex-end：从下到上
center：挤在一起居中（垂直居中）
stretch：拉伸

flex ios margin 问题 ios flex布局_html_05

5.align-content

设置子项在侧轴上的排列方式，并且只能用于子项出现多行的情况（多行），在单行下是没有效果的。

flex-start：默认值在侧轴的头部开始排列
flex-end：在侧轴的尾部开始排列
center：在侧轴中间显示
space-around：子项在侧轴平分剩余空间
space-between：子项在侧轴先分布在两头，再平分剩余空间
stretch：设置子项元素高度平分父元素高度

flex ios margin 问题 ios flex布局_flex ios margin 问题_06

flex ios margin 问题 ios flex布局_默认值_07

6.align-items和align-content的区别

align-items使用于单行情况下，只有上对齐、下对其、居中和拉伸
align-content适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找align-items多行找align-content

7. flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合属性语法为：flex-flow：row wrap；

三、常见子项属性

flex子项目占的份数
align-self控制子项目自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）

1.flex

flex属性定义子项目分配剩余空间，用flex来表示占多少份数。
语法：

.item {
flex: <number>; /* 默认值 0 */
}

flex：1；就是只占有一份。
注意：
可以用于平均分配盒子，制作圣杯布局（左右盒子固定大小，中间自适应），flex里面可以放百分比。

flex下面还有三个属性，flex是这三个属性的总称：

（1）flex-grow

flex-grow设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）。主尺寸是项的宽度或高度，这取决于flex-direction值。

剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配。flex-grow 与其他的flex属性flex-shrink和flex-basis一起使用，通常使用flex 速记来定义，以确保所有的值都被设置。flex-grow的优先级大于width。

flex ios margin 问题 ios flex布局_css_08

（2）flex-shrink

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

这里附上代码方便理解：

<p>the width of content is 500px, flex-basic of flex item is 120px.</p>
<p>A, B, C are flex-shrink:1. D and E are flex-shrink:2</p>
<p>the width of D is not the same as A's</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>

#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0,0,0,.2);
}

.box {
  flex-shrink: 1;
}

.box1 {
  flex-shrink: 2;
}

效果如下：

flex ios margin 问题 ios flex布局_html5_09

（3）flex-basis

如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

flex ios margin 问题 ios flex布局_默认值_10

2.align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
语法：

span:nth-child(2) {
/* 设置自己在侧轴上的排列方式 */
align-self: flex-end;
}

flex ios margin 问题 ios flex布局_html_11

3. coder

数值越小，排列越靠前，默认为0。
注意：和z-index不一样
语法：

.item {
order: <number>;
}

这里附上代码解释：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .box {
        margin: 0 auto;
        display: flex;
        width: 500px;
        height: 150px;
        border: 2px solid black;
    }
    
    .box div {
        width: 100px;
        height: 100px;
    }
    
    .box div:nth-of-type(1) {
        background-color: rgb(197, 17, 17);
        order: 2;
    }
    
    .box div:nth-of-type(2) {
        background-color: rgb(10, 199, 73);
        order: 1;
    }
    
    .box div:nth-of-type(3) {
        background-color: rgb(7, 103, 182);
        order: 4;
    }
    
    .box div:nth-of-type(4) {
        background-color: rgb(216, 231, 9);
        order: 3;
    }
</style>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
</body>

效果如下：

flex ios margin 问题 ios flex布局_html_12

四、总结

认识了这么多的属性，这里我们来做一些总结性的方法：

用flex实现居中对齐
利用flex实现圣杯布局
平均分配布局

1.实现居中对齐

利用justify-content和align-items两个属性同时居中实现，这里列出代码给同学们参考：

<style>
    .box {
        display: flex;
        width: 400px;
        height: 400px;
        background-color: rgb(18, 42, 177);
        justify-content: center;
        align-items: center;
    }
    
    .box div {
        width: 100px;
        height: 100px;
        background-color: rgb(0, 106, 245);
    }
</style>

<body>
    <div class="box">
        <div></div>
    </div>
</body>

效果如下：

flex ios margin 问题 ios flex布局_默认值_13

2.实现圣杯布局

我们知道圣杯布局实际上需要非常长的代码，使用浮动之后，如果里面的内容需要有100%的长度，但是有需要有盒子在它的左右，这个就需要给左边的盒子添加一个-100%的margin-left值把盒子移动到100%长度盒子的坐标，右边的盒子需要用margin-right空出右边和他一样宽度的大小。

这样实现是比较麻烦的，但是如果我们使用flex，制作就非常简单，左右盒子固定大小之后，只需要给中间的盒子flex：1；就可以实现了，这里放上演示代码：

<style>
        .box {
            display: flex;
            width: 900px;
            height: 50px;
        }
        
        .box div {
            color: #ffffff;
            text-align: center;
            line-height: 50px;
        }
        
        .box div:nth-child(odd) {
            width: 100px;
            height: 50px;
            background-color: aqua;
        }
        
        .box div:nth-child(2) {
            flex: 1;
            background-color: aquamarine;
        }
    </style>
<body>
    <div class="box">
        <div>左侧</div>
        <div>中间</div>
        <div>右侧</div>
    </div>
</body>

效果如下：

flex ios margin 问题 ios flex布局_html5_14

3. 平均分配距离

有时候需要大量的盒子同时布局，而且还需要他们按一定的比例去排列这个时候就需要使用space-around这个属性，可以给大家看看代码的实现：

<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    ul {
        display: flex;
        width: 500px;
        height: 400px;
        background-color: #cccccc;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-around;
    }
    
    li {
        width: 150px;
        height: 150px;
        background-color: #999999;
    }
</style>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

效果如下：

flex ios margin 问题 ios flex布局_flex ios margin 问题_15

除了这些用法以外，还有很多用法，比如给ul使用了dispaly：flex；让li均匀分配之后，又往ul里的li加了dispaly：flex；之后，又对li里面的多个span控制大小排列，来实现复杂的布局方式，也是一种非常有效率而且观赏性很好的布局方式。总的来说，我们需要记住父类属性的使用，子类属性的使用，多实践去查看不一样的效果，实现不同的效果展示。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：class java 泛型转换 java中泛型类

下一篇：hadoop hdfs查看node hadoop怎么查看hdfs

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯