Differences

This shows you the differences between two versions of the page.

--- devwiki:css [2021/09/19 18:24] – [Page Layout] ying
+++ devwiki:css [2023/06/22 08:23] (current) – [flex layout for elements] ying
@@ Line 132: / Line 132: @@
 }
 </code>
+===== flex layout for elements =====
+  * https://css-tricks.com/almanac/properties/j/justify-content/
+  * https://www.w3docs.com/learn-css/the-ultimate-guide-to-flexbox.html
+  * https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row
+  * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox
+  * https://stackoverflow.com/questions/33192745/center-align-container-and-left-align-child-elements?noredirect=1&lq=1
+  * https://stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items
 ===== Page Layout =====
@@ Line 236: / Line 246: @@
 </code>
-  * text background color bar strike through<code>
+===== text background color bar strike through =====
-// gradient tool: https://cssgradient.io/
+  * gradient method
+    * gradient tool: https://cssgradient.io/
+    * <code>
 // gradient with half transparent way to half BG
 <p><span='colorHalfBG'>Text</span></p>
@@ Line 245: / Line 258: @@
   background: linear-gradient(0deg, rgba(241,90,34,1) 0%, rgba(241,90,34,1) 50%, rgba(241,90,34,0) 50%);
 }
+</code>
-//  :before in absolute position to draw a block behind
+  * :before in absolute position to draw a block behind method
+    * ref: https://codepen.io/OxyDesign/pen/eHAac
+    * <code>
 .colorHalfBG:before {
   display: block;