flexbox
Display: flex
Flex-direction: row | row-reverse | column | column-reverse
align-self: flex-start | flex-end | center | baseline | stretch
justify-content: start | center | space-between | space-around | space-evenlyflexbox
Display: flex
Flex-direction: row | row-reverse | column | column-reverse
align-self: flex-start | flex-end | center | baseline | stretch
justify-content: start | center | space-between | space-around | space-evenlyflexbox in css
/*
Most Common Flexbox properties:
display: flex;
flex-direction: row / column; --> used to justify the direction of content
flex-wrap: wrap; --> holds the content inside flexbox container
These Properties are also part of flexbox and only apply on a container which contain flexbox property
Justify content:
center
start
end
baseline
space-around -->commonly used
Align items:
center
baseline
fr = fill up any available space
*/
.flexbox {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
/* column-count: 2;
columns: 2; */
}css flex
/* Flex */
.anyclass {
display:flex;
}
/* row is the Default, if you want to change choose */
.anyclass {
display:flex;
flex-direction: row | row-reverse | column | column-reverse;
}
.anyclass {
/* Alignment along the main axis */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}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
<div class="my-container"> <img src="my-picture.jpg" alt="scenic view" /> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse facilis provident culpa eos sed sunt voluptates.</p></div>.my-container { display: flex; flex-direction: row;}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] gamesCopyright © 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
