CSS 레이아웃 플렉스는 div 교차 배열 및 하단 정렬 방법을 구현합니다.

최근 WordPress에서 페이지를 작성할 때 디자이너가 이전에 접하지 못했던 웹 페이지 레이아웃 패턴을 생각해 냈습니다. 컴퓨터에서 렌더링(해상도 768px 이상)은 다음과 같습니다.

휴대폰(해상도가 768px 이하)에서는 다음과 같이 정리해야 합니다.

제 생각엔 두 가지 방법 중

첫 번째 방법은 부트스트랩의 row와 col-md를 col-md-push, col-md-pull과 함께 사용하여 코드를 구현하는 것입니다. 🎜>

아아아아

컴퓨터에 미치는 영향:

휴대폰에 미치는 영향:

부트스트랩 방법 사용 여러 행을 작성해야 합니다(한 행을 사용하여 작성하려고 했지만 실패했습니다). 내부 레이어의 요소를 제어해야 하는 경우 다른 클래스(스타일)를 추가합니다. (위 예에서는 그림과 텍스트입니다.) 예를 들어 패딩을 추가하면 p 레이어를 추가하여 작성할 수 있습니다. 스타일.

두 번째 방법은 플렉스 레이아웃에서 flex-direction: row-reverse를 사용하여 을 구현하는 코드입니다.

 1 nbsp;html> 2  3    4     <meta> 5     <meta> 6     <link> 7     <title>p左右交叉布局--文字和图片交叉</title> 8    9   10 <style>11 .C {12   margin: auto;13   padding: 30px 20px 40px;14   max-width: 600px;15 }16 .I {17   width: 100%;18 }19 .IW, .TW {20   border: 1px solid rgba(0, 0, 0, 0.3);;21 }22 .TW {23   padding: 25%;24 }25 </style>26 <p>27   </p><p>28     </p><p>29       </p><p>30         <img  class="I lazy" src="/static/imghw/default1.png" data-src="../../asset/images/flex/r1.jpg" alt="CSS 레이아웃 플렉스는 div 교차 배열 및 하단 정렬 방법을 구현합니다." >31       </p>32     33     <p>34       </p><p>我是文字，我用到了padding来实现大致居中</p>35     36   37   <p>38     </p><p>39       </p><p>40         <img  class="I lazy" src="/static/imghw/default1.png" data-src="../../asset/images/flex/r1.jpg" alt="CSS 레이아웃 플렉스는 div 교차 배열 및 하단 정렬 방법을 구현합니다." >41       </p>42     43     <p>44       </p><p>我是文字，我用到了padding来实现大致居中</p>45     46   47   <p>48     </p><p>49       </p><p>50         <img  class="I lazy" src="/static/imghw/default1.png" data-src="../../asset/images/flex/r1.jpg" alt="CSS 레이아웃 플렉스는 div 교차 배열 및 하단 정렬 방법을 구현합니다." >51       </p>52     53     <p>54       </p><p>我是文字，我用到了padding来实现大致居中</p>55     56   57 58   59 

컴퓨터에 미치는 영향은 다음과 같습니다.

휴대폰에 미치는 영향은 다음과 같습니다.

보시다시피 flex로 구현됩니다. 더 유연하게 하기 위해 모든 p는 행으로 정렬됩니다. 핵심은 짝수 행을 역순으로 정렬하는 것입니다.

.R:nth-child(even ) { flex-direction: row-reverse; } 그런 다음 휴대폰에서 정상적으로 정렬합니다 .R { display: block width: 100% } .

또한 flex를 사용하면 두 p의 하단 정렬을 쉽게 달성할 수 있다는 것을 알았습니다. 구체적인 코드는 다음과 같습니다.

 1 nbsp;html> 2  3    4     <meta> 5     <meta> 6     <title>p左右交叉布局--文字和图片交叉</title> 7    8    9 <style>10   .C {11     margin: auto;12     padding: 30px 20px 40px;13     max-width: 600px;14   }15   .R {16     display: block;17     width: 100%;18   }19   @media only screen and (min-width: 768px) {20     .R {21       display: flex;22       width: 100%;23     }24   }25   .R:nth-child(even) {26     flex-direction: row-reverse;27   }28   .I, .W {29     width: 50%;30   }31   .I img {32     width: 100%;33   }34   .W {35     display: flex;36     flex-direction: column;37     font-size: 16px;38     justify-content: center;39   }40 </style>41 <p>42   </p><p>43     </p><p><img  src="/static/imghw/default1.png" data-src="../images/flex/r1.jpg" class="lazy" alt="CSS 레이아웃 플렉스는 div 교차 배열 및 하단 정렬 방법을 구현합니다." ></p>44     <p>我是文字，我使用了flex布局，我按column在主轴y轴上居中对齐。</p>45   46   <p>47     </p><p><img  src="/static/imghw/default1.png" data-src="../images/flex/r1.jpg" class="lazy" alt="CSS 레이아웃 플렉스는 div 교차 배열 및 하단 정렬 방법을 구현합니다." ></p>48     <p>我是文字，我使用了flex布局，我按column在主轴y轴上居中对齐。</p>49   50   <p>51     </p><p><img  src="/static/imghw/default1.png" data-src="../images/flex/r1.jpg" class="lazy" alt="CSS 레이아웃 플렉스는 div 교차 배열 및 하단 정렬 방법을 구현합니다." ></p>52     <p>我是文字，我使用了flex布局，我按column在主轴y轴上居中对齐。</p>53   54 55   56 

실제로 C의 p가 주축을 x로 가정하면(행별로 정렬할 경우 주축은 x, flex-direction을 지정하지 않으면 기본값은 행별로 정렬), 배열 방향은 행이 됩니다. , 그리고 나서 p를 y축(교차축)의 맨 아래에 두도록 합니다.

align-items: flex-end;

효과는 다음과 같습니다:

물론, 이를 달성하기 위해 다른 방법을 사용할 수도 있습니다. 예를 들어 C를 상대적으로 위치시키고, C에서 하나의 p를 절대적으로 위치시킨 후, 하단을 0으로 설정하면 다음과 같으며, 효과는 위와 동일합니다.

아아아아

하지만 분명히 flex로 구현하는 것이 더 쉽습니다.

위 내용은 CSS 레이아웃 플렉스는 div 교차 배열 및 하단 정렬 방법을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!