css弹性布局

整个弹性布局的宽度是12栏。可以给弹性布局下的每个格子都占有一定宽度,空单元格不占宽度。

图片发自简书App

一个格子一般占1栏(当然如果整行元素太少,每个元素的宽度会增加,例如整行只有6个元素,那么每个元素占2栏,以此类推)。如果某个元素是合并格,那么占有合并格数的宽度。

可以通过弹性布局下的某个格子的样式配置,来手动设置格子的宽度。

弹性布局中如果格子宽度总和太多,默认是挤压显示,可以通过样式设置改为换行或者反向换行。

2.弹性布局下的格子的样式

图片发自简书App


弹性布局下的格子具有自己独特的样式。

例如选中A1,点击右上的样式配置。可以看到多了一个弹性容器元素的样式组。

弹性布局子元素样式

分栏宽度:代替默认的宽度,可以设置该格子占有的宽度,12栏就是占有全部宽度。平分表示和其他平分的格子一起平分所有剩余的宽度。例如 A1格就是平分,那么实际占有的会是除了剩余的5个格子之外的7栏宽度。

分栏偏移:表示这个格子前面要留几栏空白。

纵向自身对齐:表示这个格子是向上对齐,还是向下对齐...如果整个弹性布局容器设置的向下对齐,而这个格子向上对齐,那么其他都会向下对齐,而该格子向上对齐。

行内水平对齐:居左,居中,居右。

3.弹性布局的样式配置一

图片发自简书App


继续上一章表格布局,我们以列表页面的标题和按钮区为例来学习弹性布局。

选中弹性区域的某一格例如A1,鼠标右键选中区域(或者Ctrl+3),再鼠标右键选中样式(或者按设计器右上角的样式配置,或者Ctrl+2)。

我们可以看到弹性布局区域的样式如下:

弹性布局容器样式配置1

主轴排列方向:指的这一行的元素可以从左向右排列,也可以从右向左排列,还可以从上到下,或者从下往上。

主轴对齐方式:头对齐,尾对齐,居中对齐,分散对齐等。

主轴排列方向:默认从左到右,我们选中从右到左,看看效果。

主轴排列方向由右向左

可以看到,容器下的格子的显示顺序反过来了。

4.弹性布局的样式配置二

弹性布局容器样式配置2

换行方式:默认式不换行,如果内容太多就挤压,可以选择混行或者反向换行。

交叉轴对齐:对于常见的从左到右的布局来说,就是纵向的对齐,这一排元素是向上对齐,向下对齐,居中对齐,还是拉伸。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,168评论 1 92
  • Flex弹性布局,将是未来布局的首选,几乎所有的浏览器都已支持。 传统的盒模型display+position+f...
    老陈要上天阅读 1,320评论 0 0
  • 以前在做项目的时候,涉及到弹性布局的时候,通常用display:-webkit-box,后来看到还有display...
    小飞牛牛阅读 3,270评论 0 2
  • 开篇就气势如虹,历史使命感极强。像是一股洪流,只待东风。清丽的儿童和心事重重的母亲走来,一个满眼的好奇,四处...
    笑的眼角阅读 219评论 0 0
  • 每每读冯的文章总能被她的文字和思想带到我灵魂深处的另一边,去思索着,感悟着。这个思想深刻的女孩也在无形影响着我。 ...
    谬尔森特阅读 246评论 0 6

友情链接更多精彩内容