space between flexbox
justify-content: space-between;
html list items horizontally with flexbox
for example:
(html)
<ul class="navbar-items">
<li> <a href="#start">Start</a> </li>
<li> <a href="#profile">Profile</a> </li>
<li> <a href="#projects">Projects</a> </li>
<li> <a href="#info">Info</a> </li>
</ul>
(css)
ul.navbar-items /* Important part */
{
display: flex;
align-items: stretch;
justify-content: space-between;
width: 100%; /* play with this number to get spacings correct */
}
ul.navbar-items li /* Extra part, to style each item */
{
padding: 10px;
}
flex box in css
<!--basic--flex--layout-->
<html>
<head>
<style>
.parent{
display: flex or inline-flex;
flex-direction: row or column;
flex-wrap: wrap or wrap-reverse;
}
</style>
</head>
<body>
<div class="parent">
<div class="child-1"></div>
.
.
.
</div>
</body>
</html>
flexbox
Please read flexbox & grid in CSS TRIX,
make hands-on project watching (WESBOS videos - it's really useful)
also try [FLEXBOX - froggy] and [GRID - garden] games
Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us