css两端对齐实现方式有哪些

实现CSS两端对齐的方式有以下几种：

1. 使用flexbox布局：可以使用justify-content: space-between;属性将子元素在容器中两端对齐。

.container { display: flex; justify-content: space-between; } 

2. 使用text-align属性：对于块级元素，可以使用text-align: justify;属性将文本两端对齐。

.container { text-align: justify; } .container::after { content: ''; display: inline-block; width: 100%; } 

3. 使用CSS Grid布局：可以使用grid-template-columns属性将子元素在容器中两端对齐。

.container { display: grid; grid-template-columns: auto auto; justify-content: space-between; } 

4. 使用float属性：可以使用float: left;和float: right;将元素分别向左和向右浮动，从而实现两端对齐效果。

.left { float: left; } .right { float: right; } 

5. 使用display:inline-block属性：可以使用display: inline-block;将元素以行内块级元素的方式显示，然后使用text-align: justify;将其两端对齐。

.container { text-align: justify; } .container > * { display: inline-block; } .container::after { content: ''; display: inline-block; width: 100%; }