html - Flexbox: অনুভূমিক এবং উল্লম্বভাবে কেন্দ্র

css html5 (7)

Flexbox ব্যবহার করে ধারক মধ্যে অনুভূমিকভাবে, এবং উল্লম্বভাবে কেন্দ্র কিভাবে। নিচের উদাহরণে, আমি প্রতিটি সারির (সারিতে) নীচের প্রতিটি নম্বর চাই, যা অনুভূমিকভাবে কেন্দ্রিক।

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

http://codepen.io/anon/pen/zLxBo

Flexbox মধ্যে উল্লম্বভাবে এবং অনুভূমিকভাবে কেন্দ্র উপাদান কিভাবে

নীচে দুটি সাধারণ কেন্দ্রীকরণ সমাধান।

উল্লম্বভাবে সংলগ্ন ফ্লেক্স আইটেমগুলির জন্য একটি ( flex-direction: column ) এবং অনুভূমিকভাবে সংলগ্ন ফ্লেক্স আইটেমগুলির জন্য অন্যটি ( flex-direction: row )।

উভয় ক্ষেত্রে কেন্দ্রীয় divs উচ্চতা পরিবর্তনশীল, অনির্ধারিত, অজানা, যাই হোক না কেন যাই হোক না কেন। কেন্দ্রীভূত divs উচ্চতা ব্যাপার না।

এখানে উভয় জন্য এইচটিএমএল:

<div id="container"><!-- flex container -->

    <div class="box" id="bluebox"><!-- flex item -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex item -->
        <p>DIV #2</p>
    </div>

</div>

সিএসএস (আলংকারিক শৈলী বাদে)

যখন ফ্ল্যাশ আইটেম উল্লম্বভাবে স্ট্যাক করা হয়:

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

DEMO

যখন ফ্লেক্স আইটেম অনুভূমিকভাবে স্ট্যাক করা হয়:

উপরের কোড থেকে flex-direction rule সামঞ্জস্য করুন।

#container {
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */
    height: 300px;
}

DEMO

ফ্লেক্স আইটেম কন্টেন্ট কেন্দ্রীভূত

একটি ফ্লেক্স বিন্যাসের প্রেক্ষাপটে সুযোগ একটি পিতা-মাতা সম্পর্ক সীমাবদ্ধ। শিশুদের বাইরে একটি ফ্লেক্স ধারক descendants ফ্লেক্স বিন্যাসে অংশগ্রহণ করবেন না এবং ফ্লেক্স বৈশিষ্ট্য উপেক্ষা করা হবে। মূলত, ফ্লেক্স বৈশিষ্ট্য শিশুদের অতিক্রম উত্তরাধিকারী হয় না।

অতএব, আপনাকে সর্বদা display: flex প্রয়োগ করতে হবে display: flex বা display: inline-flex সন্তানের flex বৈশিষ্ট্য প্রয়োগ করার জন্য একটি মূল উপাদানতে display: inline-flex ।

উল্লম্বভাবে এবং / অথবা আনুভূমিকভাবে কোনও ফ্লেক্স আইটেমের মধ্যে থাকা পাঠ্য বা অন্যান্য সামগ্রীর কেন্দ্রস্থল করার জন্য, আইটেমটি একটি (ন্যস্ত) ফ্লেক্স ধারক তৈরি করুন এবং কেন্দ্রীয় নিয়মগুলি পুনরাবৃত্তি করুন।

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

আরো বিস্তারিত এখানে: একটি flexbox ভিতরে উল্লম্বভাবে টেক্সট সারিবদ্ধ কিভাবে?

বিকল্পভাবে, আপনি margin: auto প্রয়োগ করতে পারেন margin: auto ফ্লেক্স আইটেমের উপাদান উপাদানতে margin: auto ।

p { margin: auto; }

এখানে ফ্লেক্স auto মার্জিন সম্পর্কে জানুন: ফ্লেক্স আইটেমগুলি সংলগ্ন করার পদ্ধতি (বক্স # 56 দেখুন)।

ফ্লেক্স আইটেম একাধিক লাইন কেন্দ্র

যখন একটি ফ্লেক্স কন্টেইনারের একাধিক লাইন থাকে (মোড়ানো হওয়ার কারণে) align-content সম্পত্তির ক্রস অক্ষ অক্ষরের জন্য প্রয়োজনীয় হবে।

স্পেক থেকে:

8.4। প্যাকিং ফ্লেক্স লাইনস: align-content সম্পত্তি
ক্রাইন-অক্ষের অতিরিক্ত স্থান থাকলে align-content সম্পত্তি ফ্লেক্স কন্টেইনারের ভিতরে একটি ফ্লেক্স কন্টেইনারের লাইনগুলিকে সংলগ্ন করে, যেমন justify-content মূল-অক্ষের মধ্যে পৃথক আইটেমগুলিকে সারিবদ্ধ করে। নোট, এই সম্পত্তি একটি একক লাইন ফ্লেক্স ধারক কোন প্রভাব আছে।

আরো বিস্তারিত এখানে: কিভাবে আলগা-স্ব, সারিবদ্ধ আইটেম এবং সারিবদ্ধ কন্টেন্ট সঙ্গে flex-wrap কাজ করে?

ব্রাউজার সমর্থন

Flexbox IE <10 ছাড়া সকল প্রধান ব্রাউজার দ্বারা সমর্থিত। সাফারি 8 এবং IE10 হিসাবে সাম্প্রতিক কিছু ব্রাউজার সংস্করণগুলির জন্য বিক্রেতা প্রিফিক্সগুলির প্রয়োজন। উপসর্গ যোগ করার জন্য দ্রুত উপায়ে Autoprefixer ব্যবহার Autoprefixer । এই উত্তর আরো বিস্তারিত।

পুরোনো ব্রাউজারের জন্য সমাধান কেন্দ্র

সিএসএস টেবিল এবং পজিশনিং বৈশিষ্ট্য ব্যবহার করে বিকল্প কেন্দ্রীকরণের সমাধানটির জন্য এই উত্তরটি দেখুন: https://.com/a/31977476/3597276

যদি আপনি একটি লিঙ্কে কোনও পাঠ্য কেন্দ্র করতে চান তবে এটি কৌশলটি করবে:

div {
  display: flex;

  width: 200px;
  height: 80px;
  background-color: yellow;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* only important for multiple lines */

  padding: 0 20px;
  background-color: silver;
  border: 2px solid blue;
}

<div>
  <a href="#">text</a>
  <a href="#">text with two lines</a>
</div>

আমি আপনাকে নিম্নলিখিত মত কিছু চাই।

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

ডেমো দেখুন: http://jsfiddle.net/audetwebdesign/tFscL/

আপনার। .flex-item উপাদানের ব্লক স্তর ( .flex-item পরিবর্তে .flex-item হওয়া উচিত যদি আপনি উচ্চতা এবং শীর্ষ / নিচের প্যাডিং সঠিকভাবে কাজ করতে চান।

এছাড়াও, .row , 100% পরিবর্তে প্রস্থটিকে auto সেট করুন।

আপনার। .flex-container বৈশিষ্ট্য জরিমানা।

যদি আপনি ভিউ ভিউতে উল্লম্বভাবে। .row কেন্দ্রিক হতে চান তবে html এবং body 100% উচ্চতা নির্ধারণ করুন এবং body মার্জিনগুলিও শূন্য করুন।

নোট করুন যে। .flex-container উল্লম্ব সারিবদ্ধ প্রভাব দেখতে উচ্চতা প্রয়োজন, অন্যথায়, .flex-container এই .flex-container বন্ধ করতে প্রয়োজনীয় সর্বনিম্ন উচ্চমানের গণনা করে, যা এই উদাহরণটিতে দৃশ্য পোর্টের উচ্চতা থেকে কম।

পাদটীকা:
flex-flow , flex-direction , flex-wrap বৈশিষ্ট্যগুলি এই নকশাটি সহজলভ্য করতে পারে। আমি মনে করি যে আপনি যদি উপাদানগুলি (ব্যাকগ্রাউন্ড চিত্র, সীমানা এবং আরও অনেক কিছু) কাছাকাছি কিছু স্টাইল যুক্ত করতে না চান তবে .row প্রয়োজন হয় না।

একটি দরকারী সম্পদ হল: http://demo.agektmr.com/flexbox/

গুরুত্বপূর্ণ ব্রাউজার নির্দিষ্ট বৈশিষ্ট্য ব্যবহার করতে ভুলবেন না:

সারিবদ্ধ আইটেম: কেন্দ্র; ->

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

ন্যায্যতা-বিষয়বস্তু: কেন্দ্র; ->

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

আপনি ভাল বোঝার জন্য এই দুটি লিঙ্ক পড়তে পারে: http://css-tricks.com/almanac/properties/j/justify-content/ এবং http://ptb2.me/flexbox/

গুড লাক।

সিএসএস + ব্যবহার করে

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

HERE একটি চেহারা নিতে

diplay: flex; এর জন্য ধারক এবং margin:auto; এটা আইটেম নিখুঁত কাজ করে।

দ্রষ্টব্য: আপনি প্রভাব দেখতে width এবং height সেটআপ আছে।

#container{
  width: 100%; /*width needs to be setup*/
  height: 150px; /*height needs to be setup*/
  display: flex;
}

.item{
  margin: auto; /*These will make the item in center*/
  background-color: #CCC;
}

<div id="container">
   <div class="item">CENTER</div>
</div>

display: flex;
align-items: center;
justify-content: center;