0_intro

public/2_flexbox/style_flexbox.css

@@ -0,0 +1,119 @@
+/* //// Flexbox normal */
+/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
+
+#flex-container {
+  display: flex;
+  /* display: none !important; */
+  flex-direction: row;
+  gap: 0px 70px;
+  text-align: justify;
+}
+#flex-container > .flex-item {
+  flex: auto;
+}
+
+.flex-item {
+  width: 100px;  
+  margin: auto;  /* Magic! */
+}
+
+
+
+/* //// FLEX items (boites) */
+
+/* ... */
+.flex-container {
+  display: flex;
+  max-width: 80vw;
+
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: right;
+  
+  /* RESET */
+  padding: 0;
+  list-style: none;
+  width: 100%;
+  margin: auto;
+
+  img {
+    display: none;
+  }
+}
+.flex-container.tomato 
+.flex-item {
+  background: tomato;
+  padding: 0px;
+  width: 200px;
+  width: calc(100% / 4 - 10px);
+  box-sizing: content-box;
+  height: 150px;
+  margin-top: 10px;
+  line-height: 150px;
+  color: white;
+  font-weight: bold;
+  font-size: 3em;
+  text-align: center;
+}
+
+
+
+
+/* //// Navigation */
+.navigation li {
+  list-style: none;
+}
+
+/* Large */
+.navigation {
+  gap: 0px 20px;
+  display: flex;
+  flex-flow: row wrap;
+  /* This aligns items to the end line on main-axis */
+  justify-content: flex-end;
+}
+
+/* Medium screens */
+@media all and (max-width: 800px) {
+  .navigation {
+    /* When on medium sized screens, we center it by evenly distributing empty space around items */
+    justify-content: space-around;
+  }
+}
+
+/* Small screens */
+@media all and (max-width: 500px) {
+  .navigation {
+    /* On small screens, we are no longer using row direction but column */
+    flex-direction: column;
+  }
+}
+
+
+
+/* FIXS */
+body {
+  margin: 0;
+  max-width: none;
+  box-sizing: content-box;
+}
+
+#flexbox_css_tricks {
+  /* width: 100vw; */
+  width: calc(100vw - 13px);
+}
+
+
+/* ///// FLEXBOX */
+#flex-container,
+.flex-container {
+  margin: auto;
+  clear: both;
+  max-width: 80vw;
+}
+#flex-container,
+.flex-container, 
+.navigation {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}