Scribd
Upload
3 views4 pages

Css

Uploaded by

rishimeditate
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views4 pages

Css

Uploaded by

rishimeditate
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

Base Size in case of flex elements is based on either

of the below 3:
1) content-size
2) given width
3) given flex-basis(similar to width ,if direction is
coloum the it starts applying on height so width will
be taken from either width or content-size)

for prevent overflow=> flex-wrap:wrap (apply it in


on parent)

for giving gap b/w the flex-elements => gap:_ px or


row-gap(for only row) or column-gap (for only col)

margin-inline:_px (shorthand for both left and right)


margin-block:_px (shorthand for both top and bottom)

---------
order:0 (konsa sa flex-element konse position par hai
sabka 0 hoga initially , agar apan 0 se zyda denge
to vo piche ho jaega)

align-self: (sirf ek particular element ki position


change karna hai to ye use karna)
1)center
2)flex-end or end
3)flex-start or start

shorthand:
flex: flex-basis flex-grow flex-shrink;

align-items: agar ek tag ke content ka size


bada hai aur dusre ka chota hai size , then
1) :baseline ->this will align both the elements
along the baseline.

=> in order to align elements at the center in case


of multiple lines -> align-content:center ->similar
to justify-content but is used in case of multiple
lines.

flex-flow:direction wrap // two properties


using one => flex direction and flex wrap.

align-content:flex-start ,flex-end , stretch,


center => used to determine spacing b/w
flex elements which are in different rows.

// Projects

property:inherit -> if we give inherit to any property then


it will inherit the property value from it's parent.

text-transform:upper-case // text property.

to give space between the lines=> line-height:__ (avoid giving in px , just give
the numbers and
it will set it according to the font-size)

overflow:hidden => to hide the overflowing thing.

trick for making the base size equal => give


elements " width=100% "

margin:auto => means jitni space bachi hai utna space


as margin de do.

media-queries=>there are two types of media


1) print media -> @media print{} = while printing
2) screen media -> @media screen{}
for both -> @media all{}

cascading is also applicable in case of media-queries


bcz. if media is written on top then niche wala apply
ho jaega.

  => for giving space while writing html only

display:none => for hiding any element.

max-width:max-content => ab jitna content rahega utni


hi width rahegi.

it is not necesarry to have elements under flex parent


to give margin in auto , if the elements are block
then also we can set the elements dimension as block.

for bring text in center = text-align:center

z-index= jiska jyada hoga vo element upar rahega


in case of overlapping.

Agar kisi ke upar position hai and dusre ke pass nhi


hai , to jiske pass hai vo upar rahega , even if
not z-index given.

if ek container ke pass both z-index and position


hai then uske andar ke elements uss container
ke bahar nhi jaenge , in the sense that neigbouring
container ke elements ke sath upar niche nhi karenge
and akele hi rahenge.

float:left => using this property we can wrap text


around a image . left is done so that image comes in
the left . -> it is somewhat similar to absolute
positioning -> but here in case of float only the
element will go below some other above element
but the text of that element won't go below the
above element instead it will go in the next line.

one float element can come beside other float element


but to stop this we can give clear:left -> using
this no one will come on the left .

and float:right => starts from the right


agar pic ke sath text hai and we apply float -> then
if background color is appplied and pic badi hai
then vo bahar niklegi => to avoid it apply
"display:flow-root" on the image.
left .

----------------------------------
Grid :
display:grid;
grid-template-coloumns:100px 100px (this means
2 coloumns of 100px each) or
grid-template-coloumns:repeat(3,100px)
// read it like " repeat 3 times 100px (for
remembering)

If we dont want to set height or width then


give auto it will automatically set it's
width for both row and coloumns.

if grid is made then it makes its inline


elements to block elements and all elements
will stay inside its particular box , which
is partitioned by the grid.

agar number of elements jyada ho jate hai


to automatically new cells create ho jaenge
but uski height new added elements jitni hogi
not equal to what we set initially.

grid-coloumn-start:4 (this means start filling


from 4th line)
similary for row-> grid-row-start:3;

for ending => grid-column-end:3;


grid-row-end:4;

=> grid-column:2/3 (for setting both


start and end)
// span also works with this
grid-column:span 3/5 (no. of cells to be
spanned / ending row no. )

// or

for starting=> grid-row-start:span 3;


// this means expand in 3 rows , this can
be done for coloumns also.

we can give both end and start to cover more


cells using single element.

coloumn-gap:2px (to give space b/w the


coloumns) ( it starts causing overflow
if extra spacing is given)

for both row and column gap=> gap:2px;

in case of multiple elements if we give


grid-template-row:3 (then only first element
will come to the new position rest will change
there position and rearrage them into the same
space without creating new space.

another methods of defining grid rows and col.

grid-template-column:20% 20% (divided into


2 parts of width equal to 20% of overall
width)
or : repeat(2,20%)
or 1fr 1fr (fr means fraction)
or repeat(2,1fr)

grid-auto-flow:row (then if we define grid, then bydefault


rows will be created , and if column
then rows will be created )
and if in above property we give "row-dense"-> then
agar apn first element of grid lo kahi baad se shuru
karte hai tab, baaki elements aage wali place le lenge,
bydefault jagah nhi lete in case of column-change

grid-auto-columns : 100px (jo automatically create hote hai


columns unki "width" ham dicide kar sakte hai)
and in case of row we can decide the height of the column.

in case of grids we also have " justify-items: center ".

align-item and justify-item : normal => this means remain in


the default stretch position. we can also give flex-values like
flex-start and flex-end , using this we can move elements
inside the grid cells.

justify-self : for individual elements.

grid-template-row:repeat(auto-fill,100px) => automatically


jitni space hogi unti rows create karega 100px ki.

// for defining min and max width:

grid-template-column:repeat(5,minmax(20px,80px))

You might also like