精华内容
下载资源
问答
  • 常用的几种布局方式---Flex 布局(垂直居中展示)前言一、默认使用静态布局二、flex布局1.父元素container1.1.display:flex1.2.flex-direction属性1.3.主轴与侧轴1.4.justify-content属性1.5.align-items属性1.6.flex...


    前言

    怎样让一个元素在垂直或者水平方向居中显示,可以使用css解决,但是会出现不同浏览器的兼容性问题,而flex布局解决了一个父容器和多个子元素的布局问题,从而灵活布局。

    一、默认使用静态布局

    在这里插入图111片描述

    代码展示
    在这里插入图片描述

    二、flex布局

    1.父元素container

    在这里插入图片描述

    1.1.display:flex

    在父标签加入display:flex后

    .wrap{
    height:800px;
    border:28px solid antiquewhite;
    display:flex;
    }
    

    垂直布局变成水平布局,如下图所示
    在这里插入图片描述

    1.2.flex-direction属性

    在父标签中修改

    .wrap{
    height:800px;
    border:28px solid antiquewhite;
    display:flex;
    flex-direction:column;
    }
    

    后又变成垂直布局
    在这里插入图片描述

    1.3.主轴与侧轴

    先介绍下主轴和交叉轴概念,有些属性只针对主轴生效,部分对交叉轴生效
    在这里插入图片描述

    1.4.justify-content属性

    justify-content用来设置主轴方向上的子元素排列的方式,属性为center时意味居中显示

    .wrap{
    height:800px;
    border:28px solid antiquewhite;
    display:flex;
    justify-content:center;
    }
    

    又变成水平居中显示:
    在这里插入图片描述
    更改justify-content属性值,justify-content:flex-start后,从起始侧开始排列:
    在这里插入图片描述
    justify-content:flex-end后,排列在尾部:
    在这里插入图片描述
    想均匀分割子元素的空间距离,可使用justify-content:space-between;
    在这里插入图片描述
    justify-content:space-around;
    在这里插入图片描述
    justify-content:space-evenly;
    在这里插入图片描述

    .wrap{
    height:800px;
    border:28px solid antiquewhite;
    display:flex;
    flex-direction:column;
    justify-content:center;
    }
    

    注意,此时因为flex-direction:column变成了垂直展示,此时垂直方向为主轴,水平方向为交叉轴
    修改后变成垂直方向居中显示:
    在这里插入图片描述

    1.5.align-items属性

    align-items:center用来设置交叉轴方向上的子元素排列的方式,属性为center时意味居中显示

    .wrap{
    height:800px;
    border:28px solid antiquewhite;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    }
    

    后使交叉轴方向居中显示:
    在这里插入图片描述

    1.6.flex-wrap属性

    当网页缩小到页面不足以容纳元素的排列,使盒子中的元素压缩,失去原来的形状,希望能换行展示,则使用
    flex-wrap:wrap;

    2.子元素items

    在这里插入图片描述

    第二个盒子不设定宽度,则盒子宽度就为内容本身宽度
    在这里插入图片描述
    代码展示
    在这里插入图片描述
    此时修改代码:

    .box-2{
    background:darkcyan;
    flex-grow:1;
    }
    

    代码展示
    在这里插入图片描述
    更为详细的可以看看阮一峰的http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    展开全文
  • 版权声明:本文首发在公众号Flutter那些事,未经授权,严禁转载。 本文示例代码发布在Github...先来看看本文的目录,如下所示: 在原生Android开发中,我们经常会用LinearLayout来达到水平或垂直方向的布局,...

    版权声明:本文首发在公众号Flutter那些事,未经授权,严禁转载。

    本文示例代码发布在Github,地址为: https://github.com/AweiLoveAndroid/Flutter-learning/blob/master/README-CN.md

    先来看看本文的目录,如下图所示:

    在原生Android开发中,我们经常会用LinearLayout来达到水平或垂直方向的布局,在Flutter中有两个常用的组件也能够做到类似的效果,分别是RowColumn组件,Row组件主要功能是处理水平方向的布局,Column组件主要功能是处理垂直方向的布局。下文会具体讲解在Flutter中如何使用Row和Column组件实现LinearLayout效果,以及两者之间的对比,方便大家对比学习。


    LinearLayout 里面的android:orientation="horizontal”属性相当于Row组件,LinearLayout 里面的 android:orientation="vertical”属性相当于Column组件。

    Flutter和LinearLayout的对比图示如下:

    Row的使用示例代码如下所示:

    Column的使用示例代码如下所示:

    Flutter中的Row以及Column使用效果图如下所示:

    这里是Android里面的使用(由于Flutter效果和Android的是一样的,后文的安卓效果图就不再展示了)


    LinearLayout 里面的android:layout_width="wrap_content"或者 android:layout_height="wrap_content"属性相当于Row/Column组件里面的 MainAxisSize.min 属性。

    LinearLayout 里面的android:layout_width="match_parent"或者android:layout_height="match_parent"属性相当于Row/Column组件里面的 MainAxisSize.max 属性。Row/Column组件如果没有设置mainAxisSize属性,默认为max属性值。第二小节中的Row/Column组件我们并没有设置mainAxisSize属性,但是我们可以看到它的效果是MainAxisSize.max 属性的效果(Row自动填充宽为屏幕的宽,Column自动填充高为屏幕的高)。

    Flutter和LinearLayout的对比图示如下:

    Flutter使用图解如下:


    这个是最复杂的,需要重点掌握。gravity属性在Android里面是用于指定控件本身或子孩子控件的对齐属性。在Flutter中我们可以使用 Row/Column组件MainAxisAlignment 以及 CrossAxisAlignment 实现控件的对齐效果。

    MainAxisAlignment 是设置主轴方向的对齐方式。如果我们给 Row 组件设置 MainAxisAlignment 属性,那么它的主轴为水平方向。如果我们给 Column 组件设置 MainAxisAlignment 属性,那么它的主轴为垂直方向。

    MainAxisAlignment 有6个属性值,默认值为start,分别是:

    1、MainAxisAlignment.start,将子控件放在主轴的起始位置。
    2、MainAxisAlignment.end,将子控件放在主轴末尾。
    3、MainAxisAlignment.center,将子控件放在主轴中间位置。
    复制代码

    下面这三个属性需要特别关注一下:

    // 将主轴方向上的空白区域等分,使得子孩子控件之间的空白区域相等,
    // 两端的子孩子控件都靠近首尾,没有间隙。
    4、MainAxisAlignment.spaceBetween 
    
    // 将主轴方向上的空白区域等分,使得子孩子控件之间的空白区域相等,
    // 两端的子孩子控件都靠近首尾,首尾子孩子控件的空白区域为1/2。
    5、MainAxisAlignment.spaceAround 
    
    // 将主轴方向上的空白区域等分,使得子孩子控件之间的空白区域相等,包括首尾。
    6、MainAxisAlignment.spaceEvenly
    
    复制代码

    CrossAxisAlignment是设置交叉轴方向的对齐方式,比如当前给 Row 组件设置 CrossAxisAlignment 属性,那么它的交叉轴为垂直方向。如果我们给 Column 组件设置 CrossAxisAlignment 属性,那么它的交叉轴为水平方向。

    CrossAxisAlignment 有5个属性值,默认值为center,分别是:

    CrossAxisAlignment.start, 子孩子控件显示在交叉轴的起始位置。
    CrossAxisAlignment.end, 子孩子控件显示在交叉轴的末尾位置。
    CrossAxisAlignment.center, 子孩子控件显示在交叉轴的中间位置。
    CrossAxisAlignment.stretch, 子孩子控件完全填充交叉轴方向的空间。
    CrossAxisAlignment.baseline, 让子孩子控件的baseline在交叉轴方向对齐。
    复制代码

    具体的示例如下:

    (1)Row的子孩子组件对齐

    下面这个是Row的子孩子组件对齐的示例:

    示例中设置的主轴的属性值是:MainAxisAlignment.spaceEvenly,交叉轴的属性值是:CrossAxisAlignment.end

    使用图示如下图所示:

    (2)Column的子孩子组件对齐

    下面这个是Column的子孩子组件对齐的示例:

    示例中设置的主轴的属性值是:MainAxisAlignment.spaceEvenly,交叉轴的属性值是:CrossAxisAlignment.end

    使用图示如下图所示:


    在Android中 layout_weight 是LinearLayout里面的属性,它是用来给子孩子设置权重的,表示给子孩子按照设置的比例去分配空间。在Flutter中我们可以使用 Expanded 包裹RowColumn组件,使用 Expanded 组件里面的 flex属性 去实现同样的效果。

    先来看看Row是会如何给子孩子设置权重的,示例代码如下所示:

    上例中我写了一个Row,里面有3个并排的Icon组件,权重分别是1、2、5,为了好区分,我给每个Icon加了不同的背景颜色。为了代码更优雅,我封装了一个buildIcon(IconData icon, {int flex = 1, Color color}) 函数,IconData是必须传入的参数; 参数2是权重,默认值为1; 参数3是组件的背景颜色,参数2和参数3是可选参数,可以根据需要进行传入。

    我们看看效果图,如图所示:

    同理,我们只需要把上例中的 new Row替换成new Column就可以实现垂直方向设置权重,如上图右边所示。


    在Flutter中的Row或Column中关于 direction 有2个需要掌握的属性,分别是:textDirection 以及verticalDirection。其中textDirection属性在Row组件中起到很大作用,verticalDirection属性在Column组件中起到很大作用。

    textDirection 的属性值为 TextDirection.ltr,表示所有的子控件都是从左到右顺序排列,这是默认值。如果为TextDirection.rtl 表示从右边开始向左边倒序排列。

    verticalDirection 的属性值为 VerticalDirection.down, 表示所有的子控件都是从上到下顺序排列。如果为VerticalDirection.up 从底部开始向上倒序排列。

    先来看看Row中是如何使用的,我们这里使用的 textDirection 属性,是还是拿本章一开始的那个例子做修改,核心代码如下所示:

    再来看看Column是如何使用的,可以看出只需要把 textDirection 属性换成 verticalDirection 就可以了。是不是很简单?

    我们看一下效果图,如图所示:

    展开全文
  • 实现一个简单的垂直布局功能 1.新建一个无ui界面的工程,基类为widget 2.代码实现 widget.cpp #include "widget.h" #include <QLineEdit> #include <QTextEdit> #include <QLayout> Widget::...

    实现一个简单的垂直布局功能

    1.新建一个无ui界面的工程,基类为widget

    2.代码实现

    widget.cpp

    #include "widget.h"
    #include <QLineEdit>
    #include <QTextEdit>
    #include <QLayout>
    
    Widget::Widget(QWidget *parent)
        : QWidget(parent)
    {
        //新建两个控件
        QLineEdit * LineEdit = new QLineEdit("编辑框");
        QTextEdit * TextEdit = new QTextEdit();
        //创建布局对象,并将控件添加到布局中去
        QVBoxLayout * Layout = new QVBoxLayout;
        Layout->addWidget(LineEdit);
        Layout->addWidget(TextEdit);
        //设置窗体布局
        this->setLayout(Layout);
    }
    
    Widget::~Widget()
    {
    
    }
    
    

    3.效果展示

    在这里插入图片描述

    展开全文
  • 如上所示,在flex布局中,无论某列存在多行可能,我们始终要保持同一行数据高度居中问题。 line-height只能解决单行问题,所以我们可以利用css3的transform属性来解决。 如果li 元素设为flex, 那么直接包裹子元素...

    在这里插入图片描述
    如上图所示,在flex布局中,无论某列存在多行可能,我们始终要保持同一行数据高度居中问题。
    line-height只能解决单行问题,所以我们可以利用css3的transform属性来解决。
    在这里插入图片描述
    如果li 元素设为flex, 那么直接包裹子元素会转化为块级元素,和li等高,就无法实现居中, 所以我们多套一层,用span元素直接包裹内容,获取到内容真正高度。就可以transform了。
    p {
    position: relative;
    span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    }
    }
    ok!

    展开全文
  • 水平线性布局嵌套垂直线性布局

    千次阅读 2012-04-02 11:34:40
    1,效果: ...2,说明:布局原理在效果中已经展示的非常明显了,图片ImageView和右边的三个文本栏TextView形成了水平布局,而三个文本栏TextView又形成了垂直布局; 3,xml: android:orientati
  • Flutter开发(八)—— 五种布局之ColumnWidget
  • 01 阿里首次公开展示AI布局12月20日,阿里云云栖大会·北京峰会召开,作为2017年阿里云栖大会最后一场,阿里做足了噱头,系列预热“重磅”、“史无前例”等形容词吸引眼球,本次大会诞生了一个新词:产业AI。...
  • 可自定义垂直循环滚动布局

    千次阅读 2017-11-01 17:12:42
    [Android]可自定义垂直循环滚动布局 @Author GQ 2017年11月01日 垂直滚动广告字幕什么的都是一行的,这个控件可以自定义布局,也就是Adapter 对于滚动多行item循环效果, 通过多个VerticalBannerView笨办法也...
  • 接下来再看自己写的LinearLayout的代码,只完成了垂直布局的部分。先上代码,再做解释: 1 package kross.android.widget; 2 3 import android.content.Context; 4 import android.util....
  • CSS布局之元素垂直居中 本文将依次介绍在不同条件下实现垂直居中的多种方法及简单原理 Tip:下文中说的适用场景只是举了几个简单的例子方便读者理解。实际应用场景太复杂,生搬硬套容易出错。最重要的是掌握各种方法...
  • 这里是Android里面的使用(由于Flutter效果和Android的是一样的,后文的安卓效果就不再展示了)         LinearLayout 里面的android:layout_width=" wrap_content ...
  • 主要为大家详细介绍了vue弹性布局实现长图垂直居上,vue实现短图垂直居中,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 文章目录css grid布局定义行高列宽定义行列间距按区域划分网格自动创建网格行列定义网格线指定网格线名称根据网格线指定子项目位置根据网格线指定子项目位置简写形式定义排列规则行优先或列优先行密集或列密集使用...
  • CSS 布局 - 水平 & 垂直对齐,全面的水平垂直居中方案: 一、水平垂直居中对齐 ...② 布局时的div框水平垂直居中,使用margin,position等达到效果, 二、文本水平垂直居中, 1、文本水平居中 ...
  • 垂直管理器类似,它可以把它所管理的部件以垂直的顺序依次排开,例如上中右侧的液晶数字和地下的表盘,就形成了垂直排列,这个时候就可以用垂直管理器来实现。 Grid布局管理器可以以网格的形式,将它所管理的
  • layout_weight设置垂直分布的三个布局

    千次阅读 2016-07-13 19:37:42
    首先问题是这个,垂直分布的三个布局: 本来预计的效果是这样的: 结果是最下面的LinearLayout死活不显示,悲剧啊 然后没办法咯,换成相对布局RelativeLayout,以为可以用layout_below和layout_above属性来...
  • 图片垂直居中

    千次阅读 2019-06-10 14:27:33
    图片居中在很多地方需要用到,水平居中很好实现,垂直居中有点麻烦,这段时间在项目中遇到了好几处这样的问题,分享给大家。 ###需求一:未知图片大小,使图片在高度固定的区域内垂直居中 大家都习惯在应该是图片...
  • 主流布局–居中布局垂直+水平)、两列、三列 居中布局的实现方式 第一种实现方式:table+margin实现水平方向上的居中,table-cell+vertical-align实现垂直方向上的居中 第二种实现方式:absolute+transform实现...
  • 真实案列—展示负边距的在CSS布局中的巧妙应用 案列一 :实现子元素水平、垂直方向居中 这是一个老生常谈的问题,想要实现子元素水平垂直居中有很多种方法。这里主要介绍如何利用负边距实现。 思路:绝对定位 ...
  •    老规矩,先看看需求...按钮布局 类似于如下结果: 尝试过一些方法,发现可以利用display:flex、 flex-wrap: nowrap;实现类似效果 代码如下: <style> ul li{ /*去除ul中list的“圆点”之类的样式*/ ...
  • div内图片和文字水平垂直居中

    万次阅读 2017-11-29 17:32:36
    大小不固定的图片、多行文字的水平垂直居中 本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现...
  • 这两天项目中需要实现一个页面,大致的布局是顶部一块区域是一部分内容,然后下面是一个title条,这个title条下面是一个列表,因为列表的数据可能有很多,所以这个页面是需要整体进行滑动的,因为只让下面的listview...
  • 垂直居中 1单行的行内元素 2多行的行内元素 3块级元素 方案一:使用定位 方案二:使用flexbox布局实现(高度定不定都可以) 3.水平垂直居中 1已知高度和宽度的元素 2未知高度和宽度的元素 方案一:使用定位属性 方案...
  • 水平垂直居中的问题 (四种方法) 水平居中:text-align:center; 垂直居中:line-height:XXpx; /line-height与元素的height的值一致 水平居中 ...flex布局 justify-content: center; 块级元素 **定宽度:*
  • 留言板原效果布局待完善效果) 解决的问题: 1、多行字母换行: word-break:break-all; 2、浮动导致的水平不对齐: flex布局 3、不使用浮动时如何左右排布: flex布局的justify-content:space-between; 4、...
  • Android 界面布局3D展示——JakeWharton大神的Scalpel
  • 布局

    2020-06-30 22:35:12
    线性布局:常用布局之一,线性布局的有点可以按照规整的方式进行垂直排列或者水平排列, 让布局看起来更加整洁. android:layout_gravity 是控制组件本身的对齐方式, android:gravity是控制本容器子组件的对齐方式; 3....
  • CSS 制作垂直导航

    千次阅读 2018-02-22 17:41:34
    因此,一些内容多,而又喜欢简约的网站,常常以侧边栏的方式进行展示。默认情况下,列表及列表项 li 元素都是块级元素,每个列表项后独占一行。因此,使用无序列表创建垂直导航就非常方便。首先,创建一个无序列表来...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,708
精华内容 9,883
关键字:

展示垂直布局图