bonnebulle/__html_css_js
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity

0_intro

Browse Source
This commit is contained in:
vincent_b
2025-10-17 00:18:16 +02:00
parent a9c8ef66db
commit 1c1f514531
28 changed files with 1422 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/2_flexbox/flexbox_css_tricks.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

94
public/2_flexbox/index.html Normal file
View File

@@ -0,0 +1,94 @@
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2 Flexboxs</title>
<link rel="stylesheet" href="../style.css">
<link rel="stylesheet" href="style_flexbox.css">
</head>
<body>
<!-- <div w3-include-html="./parts/header.html"></div> -->
<h3>Flexbox 2 colones</h3>
<div id="flex-container">
<div class="flex-item">
1 Nulla et aliquip labore duis irure veniam ipsum labore excepteur incididunt qui. Non nostrud aliquip cupidatat cupidatat enim commodo pariatur consequat quis. Fugiat nulla amet adipisicing eiusmod ullamco ullamco esse voluptate exercitation mollit velit ea aliquip aute eu. Cillum ex tempor dolore ad ex pariatur ex velit. Labore ad ad non ea cillum eiusmod sunt dolor dolore ipsum reprehenderit enim occaecat. Consequat culpa nisi in esse laborum velit non deserunt nostrud sit in veniam. Dolore veniam ad do incididunt est excepteur eiusmod esse Lorem sint.
</div>
<div class="flex-item">
2 Nulla et aliquip labore duis irure veniam ipsum labore excepteur incididunt qui. Non nostrud aliquip cupidatat cupidatat enim commodo pariatur consequat quis. Fugiat nulla amet adipisicing eiusmod ullamco ullamco esse voluptate exercitation mollit velit ea aliquip aute eu. Cillum ex tempor dolore ad ex pariatur ex velit. Labore ad ad non ea cillum eiusmod sunt dolor dolore ipsum reprehenderit enim occaecat. Consequat culpa nisi in esse laborum velit non deserunt nostrud sit in veniam. Dolore veniam ad do incididunt est excepteur eiusmod esse Lorem sint.
</div>
</div>
<h3>Flexbox items</h3>
<ul class="flex-container tomato">
<li class="flex-item">
<img src="/assets/img/random-image.png">
</li>
<li class="flex-item">
<img src="/assets/img/random-image.png">
</li>
<li class="flex-item">
<img src="/assets/img/random-image.png">
</li>
<li class="flex-item">
<img src="/assets/img/random-image.png">
</li>
</ul>
<h3>Flexbox Navigation</h3>
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h3>Flexbox Recap</h3>
<img id="flexbox_css_tricks" src="https://code.vincent-bonnefille.fr/plain-html_back/public/2_flexbox/flexbox_css_tricks.png">
</body>
<footer>
<script src="/assets/js/script_html_infos.js"></script>
<!-- <script src="/assets/js/script_html_include_w3.js"></script> -->
<!-- <script>
includeHTML();
</script> -->
<script src="https://livejs.com/live.js"></script>
</footer>
</html>

119
public/2_flexbox/style_flexbox.css Normal file
View File

@@ -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;
}