大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容主要讲解“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
.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:设置是否横跨所有列
最佳实践方式:
/*超小屏幕(手机,小于768px)*/ /*没有任何媒体查询相关的代码,移动设备优先*/ /*小屏幕(平板,大小等于768)*/ @media (min-width: 768px) { } /*中等屏幕(桌面显示器,大于等于992px)*/ @media (min-width: 992px) { } /*大屏幕(大桌面显示器,大于等于1200px)*/ @media (min-width: 1200px) { }
到此,相信大家对“css3有哪些布局属性”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!