flex布局让某个子元素靠右显示
首先给每个非flex子元素，设置竖直方向unbounded（无界）的盒约束。结合图片，也就是将2两个子设置好竖直方向无界的盒约束。示例中1和2设置了高度，因此一共占用高度是5+3=按flex的比例给flex元素分配剩余的空间。
原理就是通过css3布局属性flex将子容器转换为flex item情况，然后通过justify-content属性来达到居中。这种方式需要给父容器设置这两种属性。缺点就是css3属性，有浏览器兼容问题。垂直居中：垂直居中就是为了让子元素在父元素中排列在垂直中心位置，实现方式很多，我们看几种常用的。
设置子元素的margin，然后父元素必须浮动。 用父元素包裹，主要是因为right会覆盖left，从而导致left内容不可以看到，如果直接在left上设置margin或者padding会导致布局变化，因此只能再用一个p包裹内容，并且去除right覆盖的宽度。
使用p标签创建一个模块，在p内，再使用p标签创建两个模块，并分别设置p标签的class属性和id属性。在css标签内，通过class或id分别定义p的宽度和高度、背景颜色。
【归纳】flex布局
1、接下来就将对flex布局的几个重要知识点进行归纳。采用flex布局的元素，称为flex容器（flex container）。它的所有子元素自动成为容器成员，称为flex项目（flex item）。如上图所示，该flex容器在纵横有两根轴，其中横向的称为主轴（main axis），纵向的称为侧轴（cross axis）。
2、Flex布局是一种为盒状模型提供灵活性的布局方式。使用Flex布局，任何容器都能成为Flex容器，其子元素自动成为Flex项目。容器默认存在主轴和交叉轴，主轴方向和项目排列受flex-direction属性控制，轴线是否换行由flex-wrap属性决定。Flex布局通过容器和项目属性共同协作，实现项目的灵活对齐和分布。
3、Flex布局详解Flex布局是一种强大的布局方式，主要用于解决传统盒模型在并列排列多个块级元素时的难题。通过灵活控制元素在容器内的排列，即使在不使用position、float或display属性的情况下，也能轻松实现元素的横向并排。基础的Flex布局由两个核心概念构成：主轴和交叉轴。
4、Flex布局详解（一） Flex布局，全称为Flexible Box，是一种强大的布局方式，为盒状模型提供了极高的灵活性，适用于任何容器和行内元素。通过设置为Flex布局，子元素的float、clear和vertical-align属性将不再生效。
5、Flex布局是一种现代CSS布局方式，主要用于创建灵活且响应式的容器与项目布局。它通过设置容器和项目的属性，解决了一系列传统布局中的问题。首先，flex的核心概念是容器和项目。容器默认的主轴方向是水平，项目沿主轴自左向右排列。项目自动转换为“行内块级”元素，无论其原始类型如何。
6、理解Flex布局的关键在于区分flex container（弹性容器）和flex item（弹性子项），以及灵活调整主轴（默认为水平方向，可通过flex-direction属性改变）和侧轴（垂直方向）的布局方式。
微信小程序开发Day03——页面设计、弹性布局应用
flex弹性布局 弹性盒状布局，容器控制内部元素布局定位，CSS3新布局模型，伸缩元素，自由填充，自适应。使用flex布局的优势：在不同方向排列元素，控制元素排序方向，对齐方式，元素间等距，单个元素放大缩放比例，占比，对齐方式。flex布局常用术语：flex容器，flex项目（元素），布局方向。
首先打开微信开发者工具，新建一个小程序。page目录下新建一个test目录和相关页面文件。打开app.json文件，将test页面路径放置到index前面。单个view居中：点击打开test.wxml页面代码，输入图中的代码内容。给view设置一个class。点击打开test.wxss文件，这里设置元素样式。
在微信小程序开发中，要实现优雅的兼容性，以确保您的小程序在不同设备和屏幕上具有良好的显示和性能，可以采取以下一些方法：响应式布局：使用响应式布局设计，以适应不同屏幕大小和方向。使用百分比或弹性布局单位，而不是固定的像素值，以确保内容可以在各种屏幕上正常显示。
最后查看了一下align-items：center；的属性 居中对齐弹性盒的各项元素：view { display：flex ；align-items：center；} 但是也遇到了align-items：center无法居中的问题，想了很久终于找到了解决办法。
比PC端单一的网页不同，在移动端的技术可以应用到WEB-APP，小程序，Hybrid-App等等。Web-App 也就是我们常见的浏览器（以及内置浏览器，比如微信）打开的大型移动端网页。比如我们常见的电商网站，功能性网站，管理网站，在布局和功能上都有APP的效果。
操作流程：打开第三方编辑器—插入第一张图—按回车制造出一个空行—点击第三方编辑器顶部【背景】按钮—将编辑器背景色换成与小程序图片相同的背景色（在ps里面吸色复制16位颜色码换色）—在编辑器里复制样式到微信编辑器—在提前预留好的空行里插入小程序图片。
html布局的常用的四种实现方式
1、行内样式行内样式就是把 CSS 样式直接放在代码行内的标签中，一般都是放入标签的style属性中，由于行内样式直接插入标签中，故是最直接的一种方式，同时也是修改最不方便的样式。
2、一：嵌入式 用户可在HTML文档头部定义多个style元素，实现多个样式表。
3、Html中引入css的主要方式有四种，分别是外部样式、内部样式、内联样式、导入式。外部样式 （一） 使用外部样式的好处 减少代码量 ，网站中相同部分的样式只需要编写一次，我们只需要把css文件引入到不同的html页面中即可实现展示效果。
4、csscom.cntdtdCSS切图tdtrtablediv css table表格边框实现总结 - TOP 以上四种方式实现table表格边框样式方法，推荐使用第三和第四种方法来解决表格边框样式。希望DIVCSS5整理总结html table边框布局方法对大家有帮助并能掌握，平时需要时灵活运用。
5、然后点击菜单栏上对齐的方式”居中对齐“。最后我们将单元格内文字靠下居中对齐。
弹性盒子flex布局
Flex布局，也称为弹性盒子布局，是一种CSS布局模式。它为设计师提供了一种更有效、更灵活的方式来安排页面元素。以下是关于Flex布局的详细解释：Flex布局的基本概念 Flex布局允许容器灵活地调整其内部元素的位置、大小和排列方式。
flex是弹性盒子布局的缩写，它是一种基于CSS的一维布局方式。它允许子元素在容器中灵活地伸缩、对齐和排序。通过使用flex布局，可以轻松解决传统布局中的一些问题，如垂直居中和水平等分空间等。此外，flex布局还允许子元素在空间不足时缩小，或在有多余空间时放大。
Flex指的是弹性盒子布局（Flexible Box Layout），也叫做Flex布局，它是CSS3新增的一种布局方式。使用Flex布局可以让一块容器内的子元素按照一定的规则进行排列和布局，可以更加灵活地控制容器内子元素的排列顺序、对齐方式、间距等等。
order属性：能改变盒子的顺序，随心所欲的那种 flex-grow：注：项目中盒子会按照字的多少呈现出合适的大小，很神奇！flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
标签： #flex布局实例
