当前位置:首页 > 技术 >

网页设计css布局方式(css制作网页布局代码)

来源:原点资讯(www.yd166.com)时间:2023-02-09 15:47:00作者:YD166手机阅读>>

justify-content 属性

flex-flow 属性

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap。

.ele { flex-flow: <flex-direction> || <flex-wrap>; }复制代码align-items 属性

align-items属性定义子容器在交叉轴上如何对齐。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

.ele{ align-items: flex-start; // 交叉轴的起点对齐。 align-items: flex-end; // 交叉轴的终点对齐。 align-items: center; // 交叉轴的中点对齐。 align-items: baseline; // 项目的第一行文字的基线对齐。 align-items: stretch; // 默认,如果项目未设置高度或设为auto,将占满整个容器的高度。 }复制代码

网页设计css布局方式,css制作网页布局代码(9)

align-items 属性

align-content 属性

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

.ele{ align-content: flex-start; // 与交叉轴的起点对齐 align-content; flex-end; // 与交叉轴的终点对齐。 align-content: center; // 与交叉轴的中点对齐。 align-content: space-between;// 与交叉轴两端对齐,轴线之间的间隔平均分布。 align-content: space-around; // 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 align-content: stretch; // 默认 轴线占满整个交叉轴。 }复制代码

网页设计css布局方式,css制作网页布局代码(10)

align-content 属性

子容器属性

子容器也有 6 个属性:

  • order:子容器的排列顺序
  • flex-grow:子容器剩余空间的拉伸比例
  • flex-shrink:子容器超出空间的压缩比例
  • flex-basis:子容器在不伸缩情况下的原始尺寸
  • flex:子元素的 flex 属性是 flex-grow,flex-shrink 和 flex-basis 的简写
  • align-self
order 属性

order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0。

.ele{ order: num; }复制代码

网页设计css布局方式,css制作网页布局代码(11)

order 属性

flex-grow 属性

flex-grow 属性定义子容器的伸缩比例。按照该比例给子容器分配空间。

.ele{ flex-grow: <number>; /* default 0 */ }复制代码

网页设计css布局方式,css制作网页布局代码(12)

栏目热文

css div布局的基本步骤(divcss实现几种经典布局详解)

css div布局的基本步骤(divcss实现几种经典布局详解)

DIV CSS标准化布局的优势使用“DIV CSS”对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTM...

2023-02-09 15:09:20查看全文 >>

css100个经典案例(css100个必备技巧)

css100个经典案例(css100个必备技巧)

一、如何写出这样的页面?1、解题:(1)第一行 四大名著 :这个是个大标题。(2)观察全局:2、代码实现:备注:代码部分...

2023-02-09 15:26:02查看全文 >>

门下垂怎么调整视频(木头门下垂怎么调整视频)

门下垂怎么调整视频(木头门下垂怎么调整视频)

综合橙柿互动、新闻晨报、@中国国际航空、航空资源网、网友评论等1月27日下午#国航航班颠簸下坠乘客录视频防不测#话题冲上...

2023-02-09 15:49:48查看全文 >>

门铰链调节(门铰链的调整安装方法)

门铰链调节(门铰链的调整安装方法)

铰链是连接柜门和柜体的重要五金配件,是整个家居行业不可或缺的,每当家里装修的时候你看见木工师傅熟练地进行柜门铰链安装,你...

2023-02-09 15:22:09查看全文 >>

铰链如何调整门的上下(门上下不平门铰链怎么调)

铰链如何调整门的上下(门上下不平门铰链怎么调)

看上面图片上的前凸后平,像不像个飞机模型?所以它又叫“飞机合页”。当然除了这个比较有趣的名字以外,它还有一些更显专业的名...

2023-02-09 15:25:57查看全文 >>

div css布局经典实例(divcss排版布局步骤)

div css布局经典实例(divcss排版布局步骤)

前段时间我们分享了HTML&CSS—DIV CSS布局实例项目前五节课内容,今天继续为大家分享第六节课内容。后续...

2023-02-09 15:54:06查看全文 >>

网页制作css布局(网页设计布局图css代码)

网页制作css布局(网页设计布局图css代码)

大家好,我是三木。这篇文章,替大家汇总了css的布局方式,在每个布局的结尾附上了我认为比较好的文章链接,不仅仅可以当作学...

2023-02-09 15:49:47查看全文 >>

网页排版布局框架图(网页布局图设计工具)

网页排版布局框架图(网页布局图设计工具)

转自公众号:logo设计视觉010203040506070809本文转自微信公众号:logo设计视觉,图片来源网络,版权...

2023-02-09 15:24:30查看全文 >>

css grid布局详细图解(图解css grid 布局)

css grid布局详细图解(图解css grid 布局)

分享兴趣,传播快乐,增长见闻,留下美好!亲爱的您,这里是LearningYard新学苑。今天小编为大家带来华硕前端1...

2023-02-09 15:18:07查看全文 >>

div css布局技巧

div css布局技巧

我们在网页制作中,会有许多的术语例如:CSS、HTML、DHTML、XHTML等等。下面开始使用Div CSS进行网页布...

2023-02-09 15:23:03查看全文 >>

文档排行