大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

css3有哪些布局属性

本篇内容主要讲解“css3有哪些布局属性”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3有哪些布局属性”吧!

成都创新互联始终致力于在企业网站建设领域发展。秉承“创新、求实、诚信、拼搏”的企业精神,致力为企业提供全面的网络宣传与技术应用整体策划方案,为企业提供包括“网站建设、响应式网站、手机网站建设、微信网站建设、小程序设计成都做商城网站、平台网站建设秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

css3布局属性有:flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content、order、flex-grow、flex-shrink等等。

本教程操作环境:windows7系统、CSS3版、Dell G3电脑。

1、弹性盒模型(Flexible Box 或Flexbox)

弹性盒模型最大的特征在于,能够动态修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当布局。

(1)弹性容器属性

flex-direction:设置主轴方向,确定弹性子元素排列方式

flex-wrap:当弹性子元素超出弹性容器范围时是否换行

flex-flow:flex-direction和flex-wrap属性的快捷方式,复合属性

justify-content:主轴上的对齐方式

align-items:侧轴上的对齐方式

align-content:侧轴上有空白时,侧轴的对齐方式

(2)弹性子元素属性

order:控制弹性容器里子元素的顺序

flex-grow:设置弹性子元素的扩展比率

flex-shrink:设置弹性子元素的收缩比率、

flex-basis:指定弹性子元素伸缩前的默认大小值,相当于width和height属性

flex:flex-grow,flex-shrink和flex-basis属性的复合属性

align-self:允许独立的弹性子元素覆盖弹性容器的默认对齐设置

Flexbox菜单项目实战

 
  
  
      
      Flexbox
      
  
  
      
      
          
  • HTML
  •           
  • CSS
  •           
  • JavaScript
  •           
  • Sass
  •           
  • Ruby
  •           
  • Mongo
  •             
    .menu{
          list-style-type: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-flow: row wrap;
      }
       
      .menu li{
          height: 40px;
          text-align: center;
          line-height: 40px;
          flex: 1 1 100%;
      }
       
      .menu li:nth-child(1){
          background-color: #39ADD1;
      }
      .menu li:nth-child(2){
          background-color: #3079AB;
      }
      .menu li:nth-child(3){
          background-color: #982551;
      }
      .menu li:nth-child(4){
          background-color: #E15258;
      }
      .menu li:nth-child(5){
          background-color: #CC6699;
      }
      .menu li:nth-child(6){
          background-color: #52AC43;
      }
       
      @media  (min-width:480px) {
          .menu li{
              flex: 1 1 50%;
          }
      }
       
      @media  (min-width:768px) {
          .menu{
              flex-flow: row nowrap;
          }
      }

    2、多列详解

    属性一览:

    columns:复合属性(column-width和column-count),设置宽度和列数;

    column-width:设置每列的宽度

    column-count:设置列数

    column-gap:设置列之间的间隙

    column-rule:复合属性(column-rule-width、column-rule-style、column-rule-color),设置列之间的边框样式

    column-fill:设置列的高度是否统一

    column-span:设置是否横跨所有列

    3、媒体查询

    最佳实践方式:

    /*超小屏幕(手机,小于768px)*/
      /*没有任何媒体查询相关的代码,移动设备优先*/
       
      /*小屏幕(平板,大小等于768)*/
      @media (min-width: 768px) {
       
      }
       
      /*中等屏幕(桌面显示器,大于等于992px)*/
      @media (min-width: 992px) {
       
      }
       
      /*大屏幕(大桌面显示器,大于等于1200px)*/
      @media (min-width: 1200px) {
       
      }

    到此,相信大家对“css3有哪些布局属性”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


    新闻标题:css3有哪些布局属性
    标题网址:http://dzwzjz.com/article/iphjcj.html
    在线咨询
    服务热线
    服务热线:028-86922220
    TOP