技术控

    今日:118| 主题:49225
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 两端对齐布局与text-align:justify

[复制链接]
房妹 发表于 2016-10-1 06:42:11
149 3

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
两端对齐布局与text-align:justify

   前几天在项目开发过程中需要实现一个列表两端对齐,想着在页面开发过程中也经常会有需要用到两端对齐布局的时候,就计划总结一下常见实现方式,与诸位交流。
    可以先看看实例效果:两端对齐实现
    点此查看完整代码 https://github.com/codingplayboy/web_demo/blob/master/css/justify-layout.html
   百分比实现

   首先最简单的是使用百分比实现,如下一个展示列表:
   [code]   

        

                
  • 两端对齐布局与text-align:justify-1 (background,项目开发,justify,display,border)

  •             
  • 两端对齐布局与text-align:justify-2 (background,项目开发,justify,display,border)

  •             
  • 两端对齐布局与text-align:justify-3 (background,项目开发,justify,display,border)

  •         

   
[/code]   给该列表设置样式:
   [code]    .percent-list {
        width: 100%;
        background: #f0f0f9;
        list-style: none;
        font-size: 0;
    }

    .percent-item {
        display: inline-block;
        width: 30%;
        height: 60px;
        margin-right: 5%;
        border: 1px solid lightblue;
        box-sizing: border-box; /* 削去border边框宽度的影响 */
    }[/code]   效果如图:
   
两端对齐布局与text-align:justify-4 (background,项目开发,justify,display,border)

   这样当然很简单,而且也不会存在什么兼容性问题,但是其他问题还有很多:
   
       
  • 定宽的列表,效果很难实现
       
  • 如果内部img元素宽度不是100%且需要实现两端对齐,效果很难实现
       
  • 如果列表项数量是动态的,效果不能实现
       
   flex实现

   第二种实现方式就比较先进了,除了需要学习flex相关知识,使用还是很简单的,实现两端对齐效果,关键点是在flex容器上使用justify-content属性,并将其值设为space-between;
   Flex container
   The parent element in which flex items are contained. A flex container is defined using the flex or inline-flex values of the display property.
   Flex容器,是flex项目的父元素,flex容器通过声明display属性为flex/inline-flex值产生。
   Flex item
   Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.
   Flex项目,flex容器的每个直接子元素都是一个flex项目,当直接子元素是文本时,该文本被一个匿名flex项目包含。
   The flex-direction property establishes the main axis.
   The justify-content property defines how flex items are laid out along the main axis on the current line.
   justify-content属性定义flex项目在当前行主轴线方向上的排布,而主轴由flex-direction属性定义。
   这两个属性均在flex容器上定义。
    更多关于flex知识请参考: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ,后续会对flex进行详细阐述。
   如下一个列表结构
   [code]   

        

Flex两端对齐列表


        

                
  • 两端对齐布局与text-align:justify-5 (background,项目开发,justify,display,border)

    1


  •             
  • 两端对齐布局与text-align:justify-6 (background,项目开发,justify,display,border)

    2


  •             
  • 两端对齐布局与text-align:justify-7 (background,项目开发,justify,display,border)

    3


  •             
  • 两端对齐布局与text-align:justify-8 (background,项目开发,justify,display,border)

    4

    5


  •         

   
[/code]   我们首先在flex容器设置样式:
   [code]    // 兼容将近所有智能手机
    .flex-list {
        display: -moz-box;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: -ms-flex;
        display: flex;
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        -ms-justify-content: space-between;
        justify-content: space-between;
    }[/code]   在flex-item上设置display:inline-block;会使flex失效,于是最好声明:
   [code]    .flex-item{
        display:block
    }[/code]   注:不可在flex项目上设置flex属性

   效果如图:

两端对齐布局与text-align:justify-9 (background,项目开发,justify,display,border)

   text-align:justify实现

   另外一种要介绍的是使用text-align:justyle;实现方式。
   我们知道text-align:justify;效果是实现文字两端对齐,如。
   [code]   

默认是文字居中,如何实现文字两端对齐效果,这是个问题?



   

如何实现文字两端对齐效果,这是个问题?

[/code]   效果如图:
123下一页
友荐云推荐




上一篇:Introducing Google Container-VM Image
下一篇:Lock Up Your Raspberry Pi with Google Authenticator
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

壹切全部崩塌 发表于 2016-10-1 10:56:52
沙发抢不到,板凳也行啊!
回复 支持 反对

使用道具 举报

vkvln 发表于 2016-10-2 11:08:13
vkvln就是弹幕
回复 支持 反对

使用道具 举报

lv包包y 发表于 2016-11-14 04:44:10
众里寻他千百度,蓦然回首在这里!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表